Solution

[AllaSerhiienko]

DEMO LINK

[etojeDenys]

we can combine it in one useState

const [newMovie, setNewMovie] = useState({
  title: '',
  ...
})

now we can also create only one handle function for all fields

const handleChange = (e: ...) => {
  const {name, value} = e.target;
  setMovie((prevMovie) => ({...prevMovie, [name]: value}))
}

don't forget to specify name attr to input in TextField

[lerastarynets]

I see you did a hard work) Let's improve it a little bit more

[lerastarynets]

what's the point of using state if u don't reassign it? let it be just const id = ...

[anastasiiavorobiova]

Great work!

[anastasiiavorobiova]

Suggested change

	setMovies([...movies, newMovie]);
	setMovies(movies => [...movies, newMovie]);