我正在尝试使用MUI Datepicker和React Hook Form创建可重用组件
但在父组件上获得了Type '{ control: Control<FieldValues, object>; name: string; }' is missing the following properties from type 'DatePickerProps<unknown>': onChange, value, renderInput ts(2739)
我现在卡住了：

import { DatePickerProps } from "@mui/lab";
import { ComponentProps } from "react";

import { Control, Controller } from "react-hook-form";

import DateInputComponent from "./DateInputComponent";

type Props = {
  name: string;
  control: Control;
  errors?: {
    [x: string]: any;
  };
  rules?: any;
  defaultValue?: any;
} & ComponentProps<typeof DateInputComponent>;

type ExtendedProps = Props & DatePickerProps;

const ControlledDateInput = ({
  name,
  control,
  errors,
  rules,
  defaultValue,
  ...props
}: ExtendedProps) => {
  return (
    <Controller
      control={control}
      name={name}
      rules={rules}
      defaultValue={defaultValue}
      render={({ field: { onChange, onBlur, value } }) => (
        <DateInputComponent
          {...props}
          onChange={onChange}
          onBlur={onBlur}
          value={value}
          error={!!errors?.[name]}
          helperText={
            errors?.[name] ? errors?.[name]?.message || "Invalid field" : ""
          }
        />
      )}
    />
  );
};

export default ControlledDateInput;

最好去下面的沙箱：https://codesandbox.io/s/affectionate-drake-5bjbl?file=/src/App.tsx
请帮帮忙！！！