React form behaving strange with this.handleChange and Axios - reactjs

Question

SOLVED
I have a React/Typescript app which has a form that I'm using in a website that renders movies we've seen from a Mongo database. I have it set up so that we can edit one of the movies in the database through an edit form. Everything goes very smoothly but for the first field which is the movie title. Whenever I change that field it immediately stops me from doing anything else and I have to click the field again.
I.E. initial title: "Foo" -> "Fo" -> click -> "F" -> click -> "" -> click -> "B" -> click -> "Ba" -> click -> "Bar".
All other fields in the don't have this behavior. As far as I can tell all input forms are the same (type: text) and there should not be any difference. I can type full sentences without a pause in any other input field but no matter what I do, the first one doesn't allow me to. Why?
const EditBody = styled.div`{blablabla}`;
export interface Props {
match: {
params: {
title: string
}
},
history: any
}
type MovieObject = {
comments: string,
imdb: string,
mtc: string,
rtc: string,
smn: string,
title: string
}
class Edit extends Component<Props, { movie: any }> {
constructor(props: any) {
super(props);
this.state = {
movie: [
{
comments: '',
imdb: '',
mtc: '',
rtc: '',
smn: '',
title: '',
pictureUrl: '',
__v: Number,
_id: String
}]
};
this.handleChange = this.handleChange.bind(this);
};
componentDidMount() {
this.callServerForDatabase()
.then(data => this.setState({ movie: data }))
.catch(err => console.log(err));
};
callServerForDatabase = async () => {
const { match: { params } } = this.props;
const response = await fetch(`/edit/${params.title}`);
const body = await response.json();
if (response.status !== 200) throw Error(body.message);
return body;
};
handleChange(e: any) {
e.preventDefault();
const name = e.target.name;
const value = e.target.value;
let thisStateMovieClone: MovieObject[] = [...this.state.movie];
let updatedMovieObj: MovieObject = {
...thisStateMovieClone[0],
[name]: value
}
thisStateMovieClone[0] = updatedMovieObj;
this.setState({
movie: thisStateMovieClone
})
}
handleUpdate = (e: any) => {
e.preventDefault();
axios.post(`/edit/${this.state.movie.title}`, this.state.movie)
.then(() => this.props.history.push("/database"));
};
handleDelete = (e: any) => {
e.preventDefault();
axios.post('/delete', this.state.movie)
.then(() => this.props.history.push("/database"));
};
render() {
return (
<EditBody>
<h2>Update Movie Data</h2>
{this.state.movie.map((movie: any) =>
<div key={movie.title} className="container">
<form action={`/edit/${movie.title}?_method=PUT`} method="PUT">
<div className="inputrow">
<p className="description">Movie Title
<input className="input" type="text" value={movie.title} onChange={this.handleChange} name="title" /></p></div>
<div className="inputrow">
<p className="description">Rotten Tomatoes Score
<input className="input" type="text" value={movie.rtc} onChange={this.handleChange} name="rtc" /></p></div>
<div className="inputrow">
<p className="description">Metacritic Score
<input className="input" type="text" value={movie.mtc} onChange={this.handleChange} name="mtc" /></p></div>
<div className="inputrow">
<p className="description">IMDB Score
<input className="input" type="text" value={movie.imdb} onChange={this.handleChange} name="imdb" /></p></div>
<div className="inputrow">
<p className="description">Scary Movie Night Score
<input className="input" type="text" value={movie.smn} onChange={this.handleChange} name="smn" /></p></div>
<div className="inputrow">
<p className="description">Comments
<input className="input" type="text" value={movie.comments} onChange={this.handleChange} name="comments" /></p></div>
<button id="submitButton" type="submit" onClick={this.handleUpdate}><h2>Update Movie</h2></button> or <button id="submitButton" type="submit" onClick={this.handleDelete}><h2>Delete Movie</h2></button>
</form>
</div>
)}
</EditBody>
)
}
};
On top of that I have a problem with the axios request to the server. It works (i.e. the movie gets updated or deleted from the DB) but the this.props.history.push either doesn't work (right now) or when it does, it's faster than the server response so it re-routes back to a /database page which hasn't received the updated information yet. Only after a refresh does /database show the correct information. I've tried async/await, setTimeout, this.props.context.push, and as you an see a .then() after the returned promise. Nothing works. I think because this.history pushes to an old version of the page, instead of actually loading the page again?
Both these problems are driving me nuts! Any help would be appreciated. If someone needs to see more code let me know.
EDIT:
The componentDidMount() and callServer.. functions are because we get to this /edit page by clicking on a movie that we want to edit. So it gets the information for that movie from the server after I click it on another page.

Answer 1

For anyone reading: it was because I had the {movie.title} also as the key of the container div. This meant it re-rendered the div each time, since the key also changed. I created an index parameter and assigned the key to that which solves the rendering problem. Now just the axios problem left..
{this.state.movie.map((movie: any, index: any) =>
<div key={index} className="container"> //CHANGED KEY VALUE
<form action={`/edit/${movie.title}?_method=PUT`} method="PUT">
// WHICH COLLIDED WITH THIS VALUE
<div className="inputrow">
<p className="description">Movie Title
<input className="input" type="text" value={movie.title} onChange={this.handleChange} name="title" /></p></div>

Answer 2

And also solved the axios problem. Updated through this.setState and added a conditional in the render function. Now it works with . For anyone happening upon this question.