MUI Datagrid : How open modal via rowClick?

Question

I have code that display a datagrid table (i.e table #1) in main modal. I can manipulate existing data this table via onRowClick by calling another editing modal.

On top of this grid, I add a button to open another modal with contain source datagrid table (i.e table #2) to add data into table #1 alo using onRowClick.

How Can I trigger this modal this onRowClick and where should I put this modal?

//-----How & where I put this child modal #2 ?    

function ChildModal#2() { 
const [open, setOpen] = React.useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};

return (
<React.Fragment>
  <Button onClick={handleOpen}>Child Modal#2</Button>
  <Modal>
    ...test...
  </Modal>
 </React.Fragment>
 );
 }

//----Open child modal #1 working well ----
function AddItem() { 

//`onRowClick` datagrid table2
const handleRowClick = (params) => { 
setMessage(`Model code "${params.row.STOCKCODE} - ${params.row.DESC}"  selected`)
alert(`Model code "${params.row.STOCKCODE} - ${params.row.DESC}"  selected`) //test alert display ok

*//How to call modal child #2 in this section?*   
};
...
return (
<div>
  <Box onClick={handleOpen}>Add Item</Box> //Open datagrid table #2
  <Modal
    open={open}
    onClose={handleClose}
  >
   ....
          <DataGrid //rendering table data 
            onRowClick={handleRowClick}
            ...
)}
//Main function
export default function ModalCatalog() {
...
return ( //Main Jsx
<section>
    ...
  <Modal
    open={open}
    onClose={handleClose}
  >
      <Fab>
        <AddItem /> //This is second datagrid table #2
      </Fab>
      <GridCatalog /> //This is main datagrid table #1

  </Modal>
 </section>
 );
 }