Проверка не получает новое значение полей

Я использую response-final-form для создания форм регистрации и входа. Я создал файл, называемый валидаторами, с тремя функциями: required, allowedEmails и validatePassword length. Затем я использовал их в своих полях с validate={required} или validate={this.composeValidators(required, validatePasswordLength)}, если я хотел использовать более двух валидаторов для своих полей.

У меня есть 5 полей: имя, фамилия, имя пользователя, адрес электронной почты и пароль. Вначале, когда поля пусты, все работает нормально. Все они показывают ошибку:

"Это поле обязательно к заполнению"

но когда я пытаюсь ввести какое-то значение в конкретное поле, ошибка для этого поля все равно остается.

Вот ссылка песочницы на мой проект https://codesandbox.io/s/forma-ktvjq

Это функции в моем файле валидаторов:

export function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
} 
export const required = v => {
    if(!v || v === ' '){
        return 'This field is requireddd';
    }
    return undefined;
}

export const allowedEmails = v =>{
    if (v === validateEmail) {
        return "email is not valid";
    }
    return undefined;
};

export const validatePasswordLength = v => {
         if(v){
          if(v.length<8){
          return "Password has to be atleast 8 charachters";

        }
         return "Password accepted";
    }

import validators, { required, validatePasswordLength, allowedEmails, validateEmail  } from '../../validators';
import LoginForm from '../LoginForm';
// import Container from 'react-bootstrap/Container';
// import Row from 'react-bootstrap/Row';
// import Col from 'react-bootstrap/Col';
import React, { Component }  from 'react';
import { Form, Field } from 'react-final-form';

import { InputPassword, InputEmail, InputUsername, InputFirstName, InputLastName, InputField} from '../.././../components/InputFields';
import Button from 'react-bootstrap/Button'
import { metaProperty } from '@babel/types';
import { withRouter } from 'react-router-dom';




class RegisterForm extends Component {
sleep = ms => new Promise(res => setTimeout(res, ms));

newPage = (newPage) => {
 this.props.history.push('/login');
};
handleSubmit = async (values,e) => {
  e.preventDefault()
  await this.sleep(300);
  console.log("values", values);

    this.newPage();

};

composeValidators = (...validators) => value => validators.reduce((error, validator) => error ||  validator(value),  undefined);
render(){
       return (
            <div>
            <h1>????  Register Form</h1>
            <br>
            </br>
            <br></br>
              <Form 
                onSubmit={this.handleSubmit.bind(this)}
                render={ ( { handleSubmit, values, submitting, meta }) => (
               <form onSubmit={handleSubmit}>
                       <Field
                        name="firstName"
                        component={InputField}
                        hintText="First Name"
                        floatingLabelText="First Name"
                        validate={required}
                        type="text"
                        />
                       <Field 
                        name="lastName"
                        component={InputField}
                        hintText="Last Name"
                        floatingLabelText="Last Name"
                        validate={required} 
                        type="text"
                        />
                       <Field 
                        name="username"
                        component={InputField}
                        hintText="UserName"
                        floatingLabelText="username"
                        validate={required}
                        type="text"
                       />
                       <Field 
                        name="password"
                        component={InputField}
                        hintText="Password"
                        floatingLabelText="Password"
                        validate={this.composeValidators(required, validatePasswordLength)}
                        type="password"
                        />
                        <Field 
                        name="email"
                        component={InputField}
                        hintText="email"
                        floatingLabelText="Email"
                        validate={this.composeValidators(required, allowedEmails)}
                        type="email"
                        />

                        <Button size="lg" type="submit">Register</Button>
                       </form>

                    ) } />  

        </div> 
    );


};
}



export default RegisterForm;

Вот и мой сторонний компонент, который я использую в Field как компонент.

import { Form, Field } from 'react-final-form';
import LoginForm from '../containers/forms/LoginForm';
import RegisterForm from '../containers/forms/RegisterForm';
import './InputFields.css'



export const InputField = (props) => {
  console.log("PROOOPS ", props);
  return(
   <div>
  <InputGroup size="lg" className="mb-4">
  <FormControl 
     placeholder={props.floatingLabelText}
     type={props.input.type}


  />
  </InputGroup> 
  <div className="ValidatorStyle" >
  {props.meta.error && props.meta.touched && <span>{props.meta.error}</span>}
  </div>  
   </div>


)}

Я не получаю никаких сообщений об ошибках, но значение поля не обновляется.