Child not rerendering when parent rerenders on props change - reactjs

Question

I have a page where I can manage different things like tokens for example. When I choose to create a token, a modal component shows up with list of currently added tokens and form where I have to fill the data in. The issue is - after I add the token, it doesn't immediately show up in the Modal, I have close and re-open modal to see the added token.
managePage.js:
constructor()
{
super()
this.state = { showToken: false, tokensList: []} // control if modal should render
}
showTokenModal = () =>
{
this.getTokens() // fetches and saves tokens list to this.state.tokensList
this.setState({showToken: !this.state.showToken});
}
render()
{
...
return(
...
{this.state.showToken && (<>
<Overlay/>
<Modal onClose={this.showTokenModal} show={this.state.showToken} title={"Create token"}>
{console.log("Refreshed modal")}
<div >
<label htmlFor="title" style={{fontWeight: "bold"}}>Tokens:</label>
{this.state.tokensList.length>0 && (this.state.tokensList.map((t, i) =>
{
return (<div key={i}>{t.tokens.map((token, index) =>
{return <div key={index} >{index+1}: {token} [{t._id}]
(<label style={{color: "red"}} onClick={()=>this.deleteToken(t, token)}><strong>X</strong></label>)</div>})}</div>)
})
)}
<input type="number" name="lvl" defaultValue={2} placeholder="Access Level" onChange={this.handleChange} />
<input name="token" placeholder="Token unique ID" onChange={this.handleChange} />
<div>
<button type="button" onClick={this.showTokenModal}>Cancel</button>
<button type="button" onClick={this.addToken}>Create</button>
</div>
</div>
</Modal>
</>)}
)
}
I only call props functions in Modal component, which won't re-render Modal itself, but will re-render managePage.js, and to my understanding - re-rendering managePage.js should also re-render Modal with the new tokensList, but it doesn't!!!
Modal.js:
import React from "react";
import styles from "../css/Modal.scss";
export default class Modal extends React.Component {
constructor(props) {
super(props);
this.state = {
mystyle: "two"
};
this.timer = this.timer.bind(this);
}
onClose = e => {
this.props.onClose && this.props.onClose(e);
};
timer ()
{
this.setState({mystyle: "modal__close"})
setTimeout(async () => {
this.onClose()
}, 150)
}
render() {
if (!this.props.show) {
return null;
}
let t = this.props.show ? "modal" : "modal__close";
return (
<div className={t} style={styles}>
<div className={this.state.mystyle}>
<h2>{this.props.title}</h2>
<div className="content">{this.props.children}</div>
</div>
</div>
);
}
}
So how can I make Modal refresh when tokens are created/changed?