ReactJS Semantic ui - Невозможно ввести форму, если существует атрибут значения

Я следую руководству ReactJS по настройке формы входа. Семантический интерфейс используется и импортируется. Электронная почта и пароль передаются в атрибут value внутри формы. Когда это происходит, я не могу ничего ввести в форму. Как только я удалю его, я могу ввести информацию, но я предполагаю, что она никуда не попадет.

Кажется, не могу найти эту проблему где-либо еще. Кто-нибудь сталкивался с этой проблемой раньше?

import React from 'react';
import PropTypes from 'prop-types';
import { Form, Button } from 'semantic-ui-react';
import Validator from 'validator';
import InlineError from '../messages/InlineError';



class LoginForm extends React.Component {
    state = {
        data: {
            email: "",
            password: ""
        },
        loading: false,
        errors: {}
    };

    //... is called spread
    onChange = e => this.setState({
        data: {...this.state.data, [e.target.name]: e.target.value }
    });

    //() means function takes no params
    onSubmit = () => {
        const errors = this.validate(this.state.data);
        this.setState({errors}); //if there are errors, display them
        if (Object.keys(errors).length === 0){
            this.props.submit(this.state.data);
        }
    };

    validate = (data) => {
        const errors = {};
        if (!Validator.isEmail(data.email))
            errors.email = "Invalid email";
        if (!data.password)
            errors.password = "Can't be blank";

        return errors;
    };

    render() {

        const { data, errors } = this.state; // import variables into html
        return (
            <div>
                <Form onSubmit = { this.onSubmit }>
                    <Form.Field error = {!!errors.email}>
                        <label htmlFor = "email">Email</label>
                        <input type = "email"
                               id = "email"
                               placeholder = "[email protected]"
                               value = { data.email }
                               onChange = { this.onChange }/>
                        {errors.email && <InlineError text = {errors.email}/>}
                    </Form.Field>
                    <Form.Field error = {!!errors.email}>
                        <label htmlFor = "password">Password</label>
                        <input type = "password"
                               id = "password"
                               value = { data.password }
                               onChange = {this.onChange}/>
                        {errors.password && <InlineError text = {errors.password}/>}
                    </Form.Field>
                    <Button primary>Login</Button>
                </Form>
            </div>
        );

    }
}

LoginForm.propTypes = {
    submit: PropTypes.func.isRequired
};



export default LoginForm;

учебник: https://thewikihow.com/video_NO2DaxhoWHk&t=879s