Disable specific dates in DatePicker and Time picker

I'm trying to create a delivery and order management site I have an array of Dates that the manager has assigned available for delivery, and when the customer comes to choose a delivery date and time I want only what the manager has marked available to be clickable and everything else not, And I do not know how to extract the dates from the array and mark them as available and everything else is not (for a particular day on a particular date, he will have the unique hours that a manager chooses to be available).

An example of a set of dates that the manager marked as available

[
{_id: '6290ad8c84d5b243120e8c7f', order_id: '', date: '2022-10-10T10:36:07.000Z', time: '2022-05-27T03:00:00.039Z', isAvailable: true, …},
{_id: '6290ad6c84d5b243120e8c7d', order_id: '', date: '2022-05-21T10:36:07.000Z', time: '2022-05-27T10:00:00.039Z', isAvailable: true, …},
{_id: '6290ac2a84d5b243120e8c7a', order_id: '', date: '2022-05-21T10:36:07.000Z', time: '2022-05-27T07:00:00.039Z', isAvailable: true, …},
{_id: '6290aba884d5b243120e8c78', order_id: '', date: '2022-05-21T10:36:07.000Z', time: '2022-05-27T09:00:00.039Z', isAvailable: true, …},
{_id: '6290ab8484d5b243120e8c76', order_id: '', date: '2022-05-21T10:36:07.000Z', time: '2022-05-27T15:00:00.039Z', isAvailable: true, …}
]

Here in the customer code, he chooses a date and time he should be allowed only what the manager assigned (the array above contains the date for DesktopDatePicker and time the time on the same day selected for TimePicker)

  <Typography
    variant="h6"
    gutterBottom
    style={{
      color: "#9c8786",
    }}
  >
    Choose day and date
  </Typography>
  <Grid container spacing={3}>
    <Grid item xs={12}>
      <div>
        <LocalizationProvider dateAdapter={AdapterDateFns}>
          <Stack spacing={3}>
            <DesktopDatePicker
              label="Date desktop"
              inputFormat="MM/dd/yyyy"
              value={DateValue}
              onChange={handleDateChange}
              // shouldDisableDate={disableDates}
              renderInput={(params) => (
                <TextField
                  {...params}
                  sx={{
                    svg: { color: "white" },
                    input: { color: "white" },
                    label: { color: "white" },
                  }}
                />
              )}
              InputLabelProps={{
                classes: {
                  root: classes.cssLabel,
                  focused: classes.cssFocused,
                },
              }}
              InputProps={{
                classes: {
                  root: classes.cssOutlinedInput,
                  focused: classes.cssFocused,
                  notchedOutline: classes.notchedOutline,
                  input: classes.input,
                },
              }}
            />
            <TimePicker
              label="Time"
              value={HourValue}
              onChange={handleHourChange}
              renderInput={(params) => (
                <TextField
                  {...params}
                  sx={{
                    svg: { color: "white" },
                    input: { color: "white" },
                    label: { color: "white" },
                  }}
                />
              )}
              // error={!!HourValueErrorText}
              // helperText={HourValueErrorText}
              shouldDisableTime={(timeValue, clockType) => {
                return clockType === "minutes" && timeValue > 0;
              }}
              style={{
                color: "white",
              }}
              autoFocus
              InputLabelProps={{
                classes: {
                  root: classes.cssLabel,
                  focused: classes.cssFocused,
                },
              }}
              InputProps={{
                classes: {
                  root: classes.cssOutlinedInput,
                  focused: classes.cssFocused,
                  notchedOutline: classes.notchedOutline,
                  input: classes.input,
                },
              }}
            />
          </Stack>
        </LocalizationProvider>
      </div>
    </Grid>