ReactJS strange state behaviour

I have two components: legacy parent class component, let’s call it RowComponent, and child ModalComponent. State of those modal is located in parent component:

this.state = {
  modalIsOpen: false,
};

When I click on button it executes function which changes modalIsOpen state to true and modal is popped up. So far so good.

showRequestModal() {
  this.setState({ modalIsOpen: true });
}

Inside my child component I have isOpen state which is property that relies on modalIsOpen

<Modal
  width={600}
  destroyOnClose
  open={isOpen}
  onCancel={hideModalHandler}
/>

hideModalHandler is function that passed as property like this:

hideModalHandler={this.hideRequestModal}

That’s how my hideRequestModal looks like (it bind properly):

hideRequestModal() {
  console.log('Executing hideRequestModal');
  this.setState({ modalIsOpen: false }, () => {
    console.log('callback - modalIsOpen:', this.state.modalIsOpen);
  });
}

The real magic (or what I would say my lack of knowledge) starts here. When I try to close my modal from child component I can see text Executing hidRequestModal without changing the state (which I see from the callback). But the most bizarre thing is when I click ESC button on modal it closes (and state is updating). So my question is what the hell is going on and how to close modal on click also, not by clicking Escape key. So I suppose there is some conflicts in events or something like that. I consider rewriting parent component to be function component and maybe it will solve the issue but I don’t know. Appreciate any help