Пытаюсь сделать Инпут компонент и в файле валидации выходит такая ошибка и еще не вводится Uncaught TypeError: validators[i].check is not a function

Вот часть кода где указывает ошибка я новенький в реакте прошу не ругать, буду благодарен на любую помощь

function validateInput  (validators, value)  {
    if (validators && validators.length) {
        for (let i = 0; i < validators.length; i++) {
            const error = validators[i].check(value, validators[i].message);
            if (error) {
                return error;
            }
        }
    }
    return false;
};

и вот где я использую его валидацию . Файл инпут компонента

import React from 'react'
import PropTypes  from 'prop-types';
import  { useState } from 'react'
import { validateInput } from 'components/input/Validator';
import TextField from '@mui/material/TextField';


const InputText = ({value, label, placeholder,type, disabled,validators, onChange }) => {
      const [error, setError] = useState(false)
      

    const handleChange = (e) => {
       const {value} = e.target;
       setError(validateInput(validators, value))
       onChange(value)
       console.log(value);
      }
      
      
    
  return (
    <div>
        {error&& <h5 style={{color:'red', display:'flex',justifyContent:'center', margin:'5px 0'}}>{error.message}</h5>}
        <TextField   variant="outlined"  id="outlined-basic" name='text'
        label={label} 
        placeholder={placeholder}
        value={value}
        type={type}
        disabled={disabled}
        onChange={(e) => handleChange(e) } 
        sx={{
          margin:'5px 0'
        }}
     
        />
        
    </div>
  )
};

InputText.propTypes = {
  value: PropTypes.object,
  label: PropTypes.string,
  placeholder: PropTypes.string,
  validators: PropTypes.array,
  type: PropTypes.string,
  onChange: PropTypes.func.isRequired
};

InputText.defaultProps = {
  value:'',
  label: '',
  placeholder:'',
  type: 'text',
  disabled:'',
  validators: []
};

export default InputText

и вот файл где использую компонет инпута

import  { useState} from 'react'
import Box from '@mui/material/Box';
import InputPassword from 'components/input/InputPassword';
import { Button } from '@mui/material';
import InputText from 'components/input/InputText';
import {AiFillFacebook} from 'react-icons/ai'
import {FaVk} from "react-icons/fa"
import { required, validateEmail,  } from 'components/input/Validator';



const initialState = {email:'', text:'', password:''};
export default function Register ()  {
  const [state,setState] =useState(initialState)
  const {email,text,password} = state;
  
  const setValue = (value) => setState({...state, value});

   const handleChange = (event, newValue) => {
  setValue(newValue)
   };

  

    

    return  <div className="flex justify-center align-middle w-300px">
<Box
      component="form"
      sx={{
        '& > :not(style)': { mt: 1, width: '25ch' },
      }}
      noValidate
      autoComplete="off"
      >
        <h1
        className='flex justify-center align-middle font-semibold fz-30px'
        >Регистрация</h1>
  <div className=" mb-10" >

  <InputText
  value={text}
  type='text'
  label={'Введите имя'}
  onChange={(event)=>handleChange('text')}
  validators={[
   {check: required.required, message:'Это поле обьязательное' }
   ]}

sx={{
  marginBottom:"10px",
}}
/>
<InputText
  value={email}
  type='email'
  label={'Введите Email'}
  onChange={()=>handleChange('email')}
  validators={[
   {check: validateEmail.email, message:'Неккоректный Email' },
   {check: required.required, message:'Это поле обьязательное' }
   ]}

sx={{
  marginBottom:"10px",
}}
/> 

<InputPassword
  value={password}
  type='password'
  label={'Введите пароль'}
  onChange={()=>handleChange('password')}
  // endAdornment={handleEye}
  validators={[
   {check: required.required, message:'Это поле обьязательное' }
   ]}

sx={{
  marginBottom:"10px",
}}
/> 


  <Button 
      variant="contained"
   
   sx={{
    margin:"20px 0 ",
    width: "100%",
    textAlign: "center",
    background: "#000000",
  }}
  >Зарегистрироваться</Button>
    <p
        className='justify-center align-middle cursor-pointer'
        > Зарегистрироваться с помощью :</p>
    <div  className='flex justify-center' >
  <div style={{width:"100px", margin:"10px 35px 0 20px", cursor:"pointer",borderRadius:"10px", }}> 
   <FaVk size={"50px"}
   className=' hover:bg-blue-50/90 focus:bg-rose-50/90 active:bg-rose-50'
   />
  </div>
  <div style={{width:"100px", margin:"10px 20px 0 35px", cursor:"pointer",borderRadius:"10px", }}>
   <AiFillFacebook 
   className=' hover:bg-blue-50/90 focus:bg-rose-50/90 active:bg-rose-50'
   size={"50px"}/>
  </div>
  </div>
  </div>
  </Box>
</div>
  }

Вот пример кода в Codesandbox