I’m using react-hook-form and @mui/material‘s TextField component to create a date input field. Currently, the date is displayed in the mm/dd/yyyy format. I want to customize this format based on a dynamic dateFormat prop.

Here’s a simplified version of my code:

import { TextField } from "@mui/material";
import { Controller, useForm } from "react-hook-form";

export default function dateTimeValues(props) {
  const { control, formState } = formContext;

  const formContext = useForm({
    defaultValues: {
      dateTime: object?.dateTime?.slice(0, 10) || new Date().toISOString().slice(0, 10),
    },
  });

  useEffect(() => {
    reset({
      dateTime: object?.dateTime?.slice(0, 10) || new Date().toISOString().slice(0, 10),
    });
  }, [object, reset]);

  return (
    <Controller
      control={control}
      name="dateTime"
      render={({ field }) => {
        return (
          <TextField
            {...field}
            error={formState.errors.dateTime !== undefined}
            fullWidth
            helperText={formState.errors.dateTime && tGeneral("fieldRequired")}
            type="date"
            // I want to apply the dateFormat here
            format={dateFormat} // This doesn't work
          />
        );
      }}
      rules={{ required: true }}
    />
  );
}

The dateFormat prop can have different values like YYYY/MM/DD, MMMM DD, YYYY, DD MMMM YYYY, etc.

I’ve tried passing the format prop to the TextField component, but it doesn’t work.

How can I achieve the desired date format customization using react-hook-form and @mui/material? Any suggestions or alternative approaches would be greatly appreciated.