Как устранить ошибку Cannot read properties of undefined (reading 'preventDefault')?

Question

Дмитрий Ярощук @chokoroko

React

Как устранить ошибку Cannot read properties of undefined (reading 'preventDefault')?

Компонент Main:

export default function Main(props) {
    const classes = useStyles(props)
    const [ items, setItems ] = useState([]);
    useEffect(
        () => {
            const storedItems = JSON.parse(localStorage.getItem('items')) || [];
            setItems(storedItems);
        },
        []
    )
    const handleAdd = (event) => {
        console.log('event: ', event);
        event.preventDefault();
        const text = event.target.elements.todoInput.value;
        console.log('text: ',text)
        const newItems = [
            ...items,
            { id: Math.floor(Math.random() * 100), text }
        ];
        setItems(newItems);
        localStorage.setItem('items', JSON.stringify(newItems));

    }
    const handleRemove = (id) => {
        const newItems = items.filter(item => item.id !== id);
        localStorage.setItem('items', JSON.stringify(newItems));
        setItems(newItems);
    }
    const handleEditing = (id, newText) => {
        const updatedItems = items.map(item => {
            if (item.id === id) {
                return { ...item, text: newText }
            }
            return item
        })
        localStorage.setItem('items', JSON.stringify(updatedItems));
        setItems(updatedItems);
    }
    return (
        <div className={classes.wrapper}>
            <div className={classes.container}>
                <Header/>
                <TodoForm handleAdd={handleAdd}/>
                <div>
                    {
                        items.map(item =>
                            <TodoItem key={item.id} text={item.text} id={item.id} handleRemove={handleRemove} handleEditing={handleEditing}/>
                        )
                    }
                </div>
            </div>
        </div>
    )
}

Компонент TodoForm

export default function TodoForm(props) {
    const { handleAdd } = props;
    const handleSubmit = (event) => {
        event.preventDefault();
        handleAdd(event);
    }
    return (
        <Form
            onSubmit={handleSubmit}
            render={Login}
        />
    )
}

Компонент Login

const Login = (props) => {
    const { handleSubmit, values, pristine, submitting } = props;
    console.log('handleSubmit', handleSubmit);
    console.log('Login-props: ', props);
    console.log('Values: ', values, 'Pristine: ', pristine, 'Submitting :', submitting);
    const classes = useStyles(props);
    return (
        <form className={classes.form} onSubmit={handleSubmit}>
            <Field
                label="todoInput"
                name="todoInput"
                type="text"
                component={Input}
            />
            <Button text="Добавить"/>
        </form>
    )
}
export default Login;

Компонент Input

export default function Input(props) {
    const classes = useStyles(props);
    const {type, name, required, customClass, isChecked, changeCheckbox, input, text} = props;
    const className = cx(`${classes['form__input']}`, {[customClass]: customClass});
    return (

        <input defaultValue={text}
               type={type}
               name={name}
               required={required}
               className={className}
               checked={isChecked}
               onChange={changeCheckbox}
               {...input}
        />


    )
}

Компонент Button

export default function Button(props) {
    const classes = useStyles(props);
    const { text, onClick, customClass } = props;
    const className = cx(`${classes['form__btn']}`, {[customClass]: customClass});
    return (
        <button onClick={onClick} type='submit' className={className}>{text}</button>
    )
}