React child component unmounting when parent component state is updated - reactjs

Question

I am seeing strange behavior that I don't understand in the following code
export class PlayerListPage extends React.Component<PlayerListPageProps, {toggle: boolean}> {
constructor(props: PlayerListPageProps) {
super(props);
this.state = {
toggle: false
};
}
handleToggle = () => {
this.setState({
toggle: !this.state.toggle
})
}
render() {
return (
<div>
<TextField
key={1}
label={'label'}
value={'value'}
/>
<Button
onClick={this.handleToggle}
>
Click
</Button>
</div>
)
}
}
Every time this toggle method is triggered, and updates the component's state, the TextField component is unmounted/remounted instead of just re-rendering.
I would expect TextField to re-render without unmounting first. Could somebody kindly point out what I am doing wrong?
Some additional context: here is the parent component (which is the root of the app):
#observer
export class RootView extends React.PureComponent {
private rootStore: RootStore = new RootStore();
private appTheme : any = createMuiTheme(DarkTheme);
#observable private player: Player
async componentDidMount() {
await this.rootStore.playerStore.retrievePlayerBios();
this.player = this.rootStore.playerStore.getPlayer('12');
}
render() {
console.log(this.appTheme);
return (
<main>
<MuiThemeProvider theme={this.appTheme}>
<Provider rootStore={this.rootStore}>
{/* {!!this.player && <PlayerStatsView player={this.player}/>} */}
<PlayerListPage/>
</Provider>
</MuiThemeProvider>
</main>
)
}
}