I have 2 components that I imported from material UI also I am using typescript. I have set the values from the database, I am trying to get those values that are set on the component by default without clicking on the component.

Basically, I am checking 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 values when the page reloads, I am getting null.

My UI, the data is showing from the database:

Select component:

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

<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>

Date picker:

const [date, setDate] = useState<Date | null>(null);

<LocalizationProvider sx={{ width: 100 }} dateAdapter={AdapterDateFns}>
        <DatePicker
            label="Delivery Date"
            value={details.deliveryDate || date} //Value from DB
            minDate={new Date()}
            onChange={(newValue) => {
                setDate(newValue);
            }}
            renderInput={(params) => <TextField {...params} />}
        />
    </LocalizationProvider>

My function:

if (details.status !== status || details.deliveryDate !== date) {
        console.log('Do somthing')
    } else {
     console.log('None')
    }