controlled component

react controlled cmpnt

const BookForm = () => {
    const { addBook } = useContext(BookContext);
    const [data, setData] = useState({
        title: "",
        author:"",
    })
    const handleChange = (e) => {
        const { value, name } = e.target
        setData((prev) => {
            return {
                ...prev,
                [name]: value,
            };
        });
    };
    const handleSubmit = (e) => {
        const { title, author } = data;
        e.preventDefault();
        addBook(title, author);
        setData({title:'',author:''})
    }
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="book title"
        value={data.title}
        onChange={handleChange}
        name="title"
        required
      />
      <input
        type="text"
        placeholder="author"
        value={data.author}
        onChange={handleChange}
        name="author"
        required
      />

      <input type="submit" value='Add' />
    </form>
  );
}