React material ui with select dropdown inside a table cell - reactjs

Question

I'm trying to create a material ui table where the status column comes as a dropdown.
Here is status column is dropdown with values 'Pending,In progress,Approved'.
code:
const columns = [
{ id: 'state', label: 'State', minWidth: 170 },
{
id: 'status ',
label: 'Status',
minWidth: 170,
align: 'right',
lookup: { 0: 'Pending', 1: 'In progress',2:'Approved' }
},
];
function createData(state,status) {
return {state,status};
}
const rows = [
createData('Create New Submission', 1),
];
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
{columns.map((column) => (
<TableCell
key={column.id}
align={column.align}
style={{ minWidth: column.minWidth }}
>
{column.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{rows
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row) => {
return (
<TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
{columns.map((column) => {
const value = row[column.id];
return (
<TableCell key={column.id} align={column.align}>
{column.format && typeof value === 'number'
? column.format(value)
: value}
</TableCell>
);
})}
</TableRow>
);
})}
</TableBody>
</Table>
But dropdown is not working.Any help would be Appreciated.