I have an array of strings in “YYYY-MM-DD” format that comes from backend. I want to show only those dates from array in MUI date picker with momentjs adaptor and all the others have to be disabled.
How can I achieve this?

I tried using shouldDisableDate prop but I don’t understand how to account for dates that are not in the array, since the days can break up. There can be skips in dates, 14th and then 16th, for example. Right now I am trying to use const days with different days in order to see only those days in the calendar. My code:

const HubDatePicker = ({
  businessDays: { cutOffTime, daysAfterCutOffTime, daysBeforeCutOffTime },
}) => {
  const isCutOffTime = moment().isAfter("2024-09-12T11:06:00");

  const availableDates = isCutOffTime
    ? daysAfterCutOffTime
    : daysBeforeCutOffTime;

  const minDate = moment(availableDates[0]);
  const maxDate = moment(availableDates.at(-1));

  const [currentDate, setCurrentDate] = useState(minDate);

  const { setValue } = useFormContext();

  useEffect(() => {
    setValue("deliveryDate", currentDate.format("YYYY-MM-DD"));
  }, [setValue, currentDate]);

  const days = [
    "2024-09-14",
    "2024-09-15",
    "2024-09-16",
    "2024-09-17",
    "2024-09-18",
    "2024-09-19",
    "2024-09-22",
    "2024-09-23",
    "2024-09-24",
    "2024-09-25",
  ];

  return (
    <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="en-gb">
      <DatePicker
        minDate={minDate}
        maxDate={maxDate}
        disablePast
        value={currentDate}
        onAccept={(date) => setCurrentDate(moment(date))}
        label="Date"
        sx={{ width: "100%" }}
        slotProps={{
          textField: {
            required: true,
            id: "oi-delivery-form-date",
          },
        }}
      />
    </LocalizationProvider>
  );
};