Soy un novato en React.js y me enfrento a un error extraño que no puedo entender por qué sucede eso, busqué pero no encontré ninguna solución.

Aquí están mis códigos de componentes:

 import React, { useState } from "react"; const AddMovie = () => { const [movie, setMovie] = useState({ title: "", director: "" }); const onChange = (value, filed) => { setMovie({ [filed]: value, }); }; const onSubmit = (e) => { e.preventDefault(); console.log(movie.title, movie.director); setMovie({ title: "", director: "" }); }; return ( <div> <form className="flex -mx-2" onSubmit={onSubmit}> <div className="ml-2"> <input type="text" className="border p-2 rounded-md focus:outline-none" placeholder="Movie Title" value={movie.title} onChange={(e) => onChange(e.target.value, "title")} required /> </div> <div className="mx-2"> <input type="text" className="border p-2 rounded-md focus:outline-none" placeholder="director" value={movie.director} onChange={(e) => onChange(e.target.value, "director")} required /> </div> <div> <button type="submit" className="h-full border rounded-md px-4 text-white bg-gray-900" > Add Movie </button> </div> </form> </div> ); }; export default AddMovie;

y el error al que me enfrento es este: (me referí a DOC y leí esta sección pero tampoco funcionó)

react_devtools_backend.js:3973 Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components

¿Entonces, cuál es el problema? He hecho esta forma de enlace (sintaxis de objetos) en Vue.js muchas veces, pero no me he enfrentado a esto ni una sola vez, por lo que es un poco extraño para mí.