Dialog popup not displaying rowData react - reactjs

Question

I am new to react and working on a table with MaterialUI. It is an editable table and I am trying to have an icon that returns a dialog box. I can get the dialog returned but when trying to pass through the rowData I get nothing. I have tried useState (probably using it wrong) and also trying to pass the data as a parameter.
See code below
export default function MaterialTableDemo() {
const [state, setState] = React.useState({
columns : [
{ title: "Program", field: "Program", defaultFilter: "Program" },
{
title: 'Program Type',
field: 'ProgramType',
lookup: { 1: 'Assignment', 2: 'Auto', 3: 'Default' },
},
],
data : [
{ Program: 'Program', ProgramType: 1 },
{ Program: 'Program 2', ProgramType: 3 },
],
});
function handleOnClose() {
setOpen(false)
}
function handleOnOpen() {
setOpen(true)
//console.log(rowData);
}
const [open, setOpen] = React.useState(false);
const [close, setClose] = React.useState();
return (
<div className="section">
<h6>filtering</h6>
<MaterialTable
columns={state.columns}
icons={tableIcons}
data={state.data}
dataIcon = {rowData => {
return (
console.log(rowData),
React.useState(rowData)
)
}}
detailPanel={rowData => {
return (
console.log(rowData),
<div>
<h2>Expired Time </h2> <br></br>
<span>{rowData.ExpireDate}</span>
<br></br>
<Popup modal trigger={<button>Edit </button>}>
{close => <Content close={close} />}
</Popup>
</div>
)
}}
options={{
filtering: true
}}
actions={rowData => {
return (
console.log(rowData)
)},
[
{
icon: tableIcons.Star,
tooltip: 'Popup to Edit',
onClick: (event, handleOnOpen)
},
]}
title="Program"
editable={{
onRowAdd: newData =>
new Promise(resolve => {
setTimeout(() => {
resolve();
setState(prevState => {
const data = [...prevState.data];
data.push(newData);
return { ...prevState, data };
});
}, 600);
}),
onRowUpdate: (newData, oldData) =>
new Promise(resolve => {
setTimeout(() => {
resolve();
if (oldData) {
setState(prevState => {
const data = [...prevState.data];
data[data.indexOf(oldData)] = newData;
return { ...prevState, data };
});
}
}, 600);
}),
onRowDelete: oldData =>
new Promise(resolve => {
setTimeout(() => {
resolve();
setState(prevState => {
const data = [...prevState.data];
data.splice(data.indexOf(oldData), 1);
return { ...prevState, data };
});
}, 600);
}),
}
}
/>
<Dialog
open={open}
onClose={handleOnClose}
aria-labelledby="draggable-dialog-title"
>
<DialogTitle id="draggable-dialog-title">Edit Program</DialogTitle>
<DialogContent>
<DialogContentText>
Edit Program
</DialogContentText>
<div className="group">
{" "}
<label label for="ProgramCode"><b> Program: </b></label>
<input align="right" type="ProgramCode" placeholder="Enter Program Code" align="right" width="300" required></input>
</div>
<div className="group">
{" "}
<label for="ProgramTypeCode"><b> Program Type: </b></label>
<input type="ProgramTypeCode" placeholder="Enter Program Type" align="right" width="300" name="CPTC" required></input>
</div>
<br></br>
<button>Save</button>
</DialogContent>
</Dialog>
<br></br>
</div>
);
}