Use React Hook Form With MUI DatePicker Component In Typescript

I'm using React Hook Form & the MUI DatePicker Component with Typescript. I have a DateField component which is a reusable component containing the DatePicker.

<DateField<ReceptionInvoice>
  label="Issue Date"
  control={control}
  name={"invoiceDate"}
  options={{
    required: "This field is required",
  }}
  error={errors.invoiceDate}
  renderInput={(props) => (
      <TextField
        register={register}
        label={props.label}
        name={"invoiceDate"}
    />
    )}
/>

The TextField component the MUI textField component.

The DateField component has the following code:

import DateFnsUtils from "@date-io/date-fns";
import DatePicker, { DatePickerProps } from "@mui/lab/DatePicker";
import React, { useMemo } from "react";
import { Control, Controller, FieldValues } from "react-hook-form";
import { ReceptionInvoice } from "../models/InvoiceReception";
import { ENOFieldOverrides, ENOFieldProps } from "./EnoFieldUtils";
import ENOTooltip from "./ENOTooltip";
import { makeStyles } from "@mui/styles";

import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";

export interface ENODateFieldProps<T extends FieldValues>
    extends Omit<ENOFieldProps<T>, "register">,
        Omit<DatePickerProps, ENOFieldOverrides | "value" | "onChange"> {
    control: Control<T, object>;
}

const useStyles = makeStyles({
    fullWidth: {
        width: "100%",
    },
});

export default function ENODateField<T extends FieldValues>({
    name,
    control,
    options,
    error,
    tooltipText,
    ...rest
}: ENODateFieldProps<T>) {
    const classes = useStyles();

    return (
        <ENOTooltip text={tooltipText}>
           {/* MUI Tooltip wrapper, not relavant */}
            <LocalizationProvider dateAdapter={AdapterDateFns}>
                <Controller
                    name={name}
                    control={control}
                    render={({ field: { ref, ...fieldRest } }) => (
                        <DatePicker className={classes.fullWidth} {...fieldRest} {...rest} />
                    )}
                />
            </LocalizationProvider>
        </ENOTooltip>
    );
}

Using this code, I get the following error:

Please help me out, looking forward to your reply!