Picker, useForm: Dealing between the picker and the useform or controller

I have this problem

I use UseForm and Controller, and I made a small form which is the clear form in the file, but the problem is that I didn’t know how to make the "picker" deal with the Controller

For example, in the “width” part, I used Controller and TextField, passed the data, and used Control, UseForm, but when I put a calendar or what is called a picker, I did not know how to deal between the controller and the picker.

import React from "react";
import InputAdornment from "@material-ui/core/InputAdornment";
import TextField from "@material-ui/core/TextField";
import { Controller, useFormContext } from "react-hook-form";
import "date-fns";
import Grid from "@material-ui/core/Grid";
import DateFnsUtils from "@date-io/date-fns";
import {
  MuiPickersUtilsProvider,
  KeyboardTimePicker,
  KeyboardDatePicker,
} from "@material-ui/pickers";

function ShippingTab(props) {
  const methods = useFormContext();
  const { control } = methods;

  const [selectedDate, setSelectedDate] = React.useState(
    new Date("2022-04-16T11:44:40")
  );

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };
  return (
    <div>
      <div className="flex -mx-4">
        <KeyboardDatePicker
          margin="normal"
          id="date-picker-dialog"
          label="Date picker dialog"
          format="MM/dd/yyyy"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            "aria-label": "change date",
          }}
        />
                
        <Controller
          name="width"
          control={control}
          render={({ field }) => (
            <TextField
              {...field}
              className="mt-8 mb-16 mx-4"
              label="Width"
              autoFocus
              id="width"
              variant="outlined"
              fullWidth
            />
          )}
        />

        <Controller
          name="depth"
          control={control}
          render={({ field }) => (
            <TextField
              {...field}
              className="mt-8 mb-16 mx-4"
              label="Depth"
              id="depth"
              variant="outlined"
              fullWidth
            />
          )}
        />
      </div>

      <Controller
        name="weight"
        control={control}
        render={({ field }) => (
          <TextField
            {...field}
            className="mt-8 mb-16"
            label="Weight"
            id="weight"
            variant="outlined"
            fullWidth
          />
        )}
      />
      <Controller
        name="extraShippingFee"
        control={control}
        render={({ field }) => (
          <TextField
            {...field}
            className="mt-8 mb-16"
            label="Extra Shipping Fee"
            id="extraShippingFee"
            variant="outlined"
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">$</InputAdornment>
              ),
            }}
            fullWidth
          />
        )}
      />
    </div>
  );
}

export default ShippingTab;

>Solution :

There is an example in the react-hook-form official docs with a ReactDateicker: https://react-hook-form.com/api/usecontroller/controller/

Would something along the following lines work?

<Controller
    control={control}
    name="ReactDatepicker"
    render={() => (
    <KeyboardDatePicker
      margin="normal"
      id="date-picker-dialog"
      label="Date picker dialog"
      format="MM/dd/yyyy"
      value={selectedDate}
      onChange={handleDateChange}
      KeyboardButtonProps={{
        "aria-label": "change date",
      }}
    />
    )}
/>