I am trying to get Material Ui component current values after page reloads or DOM change without clicking on any event. The values are showing from the database.

Basically, I am checking after clicking on the save button if the values are updated or not, if the values are previous values I will return nothing. My function is ready but I am not able to get the current values when the page reloads, I am getting status state null.

My UI, the data is showing from the database:

Select component:

const [status, setStatus] = useState<string | null>(null); // My state

data.map(details=> {
<FormControl sx={{ m: 1, minWidth: 120 }}>
        <InputLabel id="demo-controlled-open-select-label">Status</InputLabel>
        <Select
            labelId="demo-controlled-open-select-label"
            id="demo-controlled-open-select"
            open={open}
            onClose={handleClose}
            onOpen={handleOpen}
            value={details.status || status} // value from DB
            label="Status"
            onChange={(e) => setStatus(details.status || e.target.value)}
        >
            <MenuItem value={'Placed'}>
                <em>Placed</em>
            </MenuItem>
            <MenuItem value={'Packed'}>Packed</MenuItem>
            <MenuItem value={'Shipped'}>Shipped</MenuItem>
            <MenuItem value={'Delivered'}>Delivered</MenuItem>
            <MenuItem value={'Cancel'}>Cancel</MenuItem>
        </Select>
    </FormControl>
<button onClick={()=>validate (details)}>save</button>
})

My function:

const validate = (details)=>{
if (details.status !== status) {
        console.log('Do somthing')
    } else {
     console.log('None')
    }
}