I want to trigger a modal event from the children component. Usally I pass the state in form of <Children handleOpen={HandleOpen} />. If the button get pressed in the children component, the event inside the parent should be triggerd and show the text from the children. How can I realize that if {children} is in use?

app.js

const App = () => {
  return (
      <Router>
        <div>
          <Switch>
          <PrivateRoute exact path="/children1" component={children1} layout={basic} />
          <PrivateRoute exact path="/children2" component={children2} layout={basic} />
          </Switch>
        </div>
      </Router>
  );
}

Layout Wrapper/Parent/Basic

const Basic = ({children}) => {
    //Modal
    const [open, setOpen] = React.useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

    return (
      <div className="App">
        //Insert Children Component
        {children}

        //Show this Modal when called from children/with sent data
        <Modal open={open} onClose={handleClose}>
         <Box>
          data xxx from child
         </Box>
        </Modal>
      </div>
    );
  };

children1 & children2

const children1 = ( { handleOpen }) => {
    return (
      <div>
        <button onClick={handleOpen} data={xxx}>Open Modal with xxx Text</button>
      </div>
    );
  };