Неконтролируемый ввод React Hooks

Я начал изучать хуки реакции с простой учебник и, к моему удивлению, получил ошибку, которую не могу понять:

Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

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

Я попытался установить начальное состояние для входов и изменить

setInputs(inputs => ({
  ...inputs, [event.target.name]: event.target.value
}));

к

setInputs({...inputs, [event.target.name]: event.target.value});

но я все еще получаю ошибку.

JSX

import React from 'react';
import './styles/form.scss';
import useSignUpForm from './hooks/customHooks.jsx';

const Form = () => {

    const {inputs, handleInputChange, handleSubmit} = useSignUpForm();

    return (
        <React.Fragment>
            <div className = "formWrapper">
                <h1 className = "header">Form</h1>
                <form onSubmit = {handleSubmit}>
                    <div className = "form-group">
                        <label htmlFor = "nicknameInput">Nickname</label>
                        <input type = "text" id = "nicknameInput" name = "nickname" onChange = {handleInputChange}
                               value = {inputs.nickname} required/>

                        <label htmlFor = "emailInput">Email Address</label>
                        <input type = "text" id = "emailInput" name = "email" onChange = {handleInputChange}
                               value = {inputs.email} required/>

                        <label htmlFor = "lastName">Last Name</label>
                        <input type = "text" id = "lastName" name = "lastName" onChange = {handleInputChange}
                               value = {inputs.lastName} required/>
                    </div>
                    <button type = "submit" className = "btn btn-primary">Submit</button>
                </form>
            </div>
        </React.Fragment>
    )
};

export default Form;

Хуки

import React, {useState} from 'react';

const useSignUpForm = (callback) => {
    const [inputs, setInputs] = useState({});
    console.info(inputs);

    const handleSubmit = (event) => {
        if (event) {
            event.preventDefault();
        }
    };

    const handleInputChange = (event) => {
        event.persist();
        setInputs(inputs => ({
                ...inputs, [event.target.name]: event.target.value
            })
        );
    };

    return {
        handleSubmit,
        handleInputChange,
        inputs
    };

};

export default useSignUpForm;

Любые идеи, что вызывает эту ошибку?