Déclencher une fonction dans un composant fonctionnel parent React à partir de son enfant

J'ai vu des problèmes similaires ici, mais je n'ai pas pu comprendre comment cela fonctionne. Nouveau dans les composants fonctionnels et React dans son ensemble.

Parent contient le Child, qui est un modal. Parent a un div qui déclenche l'affichage du modal Child, et le Child modal a un bouton close qui déclenche son masquage. Lorsque je clique sur le composant div dans Parent, je dois afficher et masquer le modal Child. Lorsque je clique sur le bouton close dans Child, je dois masquer le composant Child.

Le composant Parent :

import React, { useState } from "react";
import Child from "./Child";

const Parent = () => {
  const [buttonState, setbuttonState] = useState({
    buttonState: false,
  });

  const onParentClick = (e) => {
    e.preventDefault();
    setbuttonState(!buttonState);
  };

  return (
    <div>
      <div onClick={onParentClick}></div>
      <Child isOpen={buttonState} onParentClick={onParentClick} />
    </div>
  );
};

export default Parent;

Le composant Enfant :

import React, { useState } from "react";

const Child = (props) => {
  const [buttonState, setButtonState] = useState({
    buttonState: props.isOpen,
  });

  const onChildClick = (e) => {
    e.preventDefault();
    setButtonState(false);
    props.onParentClick();
  };

  return (
    <div
      className={
        buttonState ? "child-modal-opened" : "child-modal-closed"
      }
    >
      <div onClick={onChildClick}>Close</div>
    </div>
  );
};

export default Child;

Pour une raison quelconque, je ne peux pas faire fonctionner cela Qu'est-ce que j'oublie ici?