I can't update the state from another component - reactjs

Question

The state (open) is not updating from another component with props, the only way I made it work is with a settimeout, but I want it to close (update the open property to false) instantly. The strange thing is that when it is given in the X of the modal if it is updated (Close). (Everything else works perfectly)
ProductList.tsx
class ProductList extends React.Component<IProductListProps, IState> {
constructor(props: IProductListProps) {
super(props);
this.state = {
index: 0,
open: false,
product: undefined
}
this.handleKeyDown = this.handleKeyDown.bind(this);
}
handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
const ref: HTMLElement = this.refs['pd-' + 0] as HTMLElement
if(e.keyCode === 13) {// OPEN MODAL
this.setState({
...this.state, open: true,
product: this.props.products[ref.dataset.id],
})
}
}
handleClose() {
this.setState({
...this.state,
open: false
})
}
render() {
const { open, product } = this.state
return (
<Container>
<div>
<input type="text" name='search'
value={...} onChange={...}
onKeyDown={this.handleKeyDown} />
</div>
<table>
<tbody>
{this.props.products.map((x, i) =>
<tr key={i} data-id={x._id} ref={"pd-" + i}>
//...item-data
</tr>
)}
</tbody>
</table>
<ModalECP product={product as IDataProduct} open={open} close=
{() => this.handleClose()} />
</Container>
);
}
}
ModalECP.tsx
export default class ModalECP extends React.Component<IProps, IState> {
constructor(props: IModalECPProps) {
super(props);
this.state = { amount: '' }
this.handleKeyDown = this.handleKeyDown.bind(this);
}
handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
if (e.keyCode === 13) {
e.preventDefault()
const { amount } = this.state
const { product, close, open } = this.props
if (Number(amount) > 0 && Number(amount) <= product.stock) {
// HERE IS THE ERROR *************
setTimeout(() => close(), 500);
// *******************************
this.setState({ amount: '' })
}
}
}
render() {
const { open, close } = this.props
return (
// HERE IT WORKS / UPDATES THE PROPERTY ON
<Modal show={open} onHide={close} animation={false}>
<Modal.Header closeButton>
</Modal.Header>
<Modal.Body>
<input type="number" value={...} onChange={...}
onKeyDown={this.handleKeyDown} />
</Modal.Body>
</Modal>
);
}
}