onClick doesn't update Parent's state from Child component - reactjs

Question

I'm trying to create a Modal (popup) that may be closed onClick using a button inside the Modal.js itself. To achieve that I create useState inside Parent.js and pass closeModal function (which updates the Parent's state) into Modal.js via. props;
For whatever reason, onClick event doesn't update the Parent's state (even tho. it manages to fire the closeModal function accepted from props). From console.log I can see that the closeModal function is being run but still Parent.js state doesn't change so the Modal doesn't close. Other events like onMouseDown or onChange do work correctly and Modal get's closed as supposed to.
Could you, please, explain why it doesn't work with onClick and what happens here?
Here the code down below and a sandbox to play with: Sandbox
Parent.js
import { useState } from "react";
import Modal from "./Modal";
export default () => {
const [modal, setModal] = useState({
isShown: false,
name: ""
});
const { isShown } = modal;
const openModal = () => {
setModal({ ...modal, isShown: true });
};
const closeModal = () => {
setModal({ ...modal, isShown: false });
console.log("Modal must be close!");
};
return (
<div className="parent" onClick={openModal}>
{isShown ? <Modal closeModal={closeModal} /> : null}
<div className="message">Open Modal</div>
</div>
);
};
Modal.js
export default ({ closeModal }) => {
return (
<div className="modal">
<button className="close" onClick={closeModal}>
onClick
</button>
<button className="close" onMouseDown={closeModal}>
onMouseDown
</button>
<input type="text" placeholder="onChange" onChange={closeModal} />
</div>
);
};
P.S.: I managed to make that work by moving onClick which opens the modal inside Parent.js, but I still don't understand why it didn't work and what really happens. I assume that with onClick the state gets updated so fast that at the moment it gets compared to the old one it appears there is no difference, so it ends up not updating. But this is just my guess...
Could you clarify for me, please?
Parent.js
import { useState } from "react";
import Modal from "./Modal";
export default () => {
const [modal, setModal] = useState({
isShown: false,
name: ""
});
const { isShown } = modal;
const openModal = () => {
setModal({ ...modal, isShown: true });
};
const closeModal = () => {
setModal({ ...modal, isShown: false });
console.log("Modal must be close!");
};
return (
<div className="parent">
{isShown ? <Modal closeModal={closeModal} /> : null}
<div className="message" onClick={openModal}>Open Modal</div>
</div>
);
};

Answer 1

You need to stop the click event propagation. As Child div is overlapping with Parent (its button), both events are taking place in order:
"close the modal (in child/Modal)"
"open the modal (in parent/Button)"
That's the reason it is staying opened. To fix it, use stopPropagation in the Modal (child) component :
<button className="close" onClick={e => {
e.stopPropagation()
closeModal()
}}>
PS: I would suggest going with this modal