Is there a way to solve this TypeScript & Mantine not-assignable DateValue error?

Question

The project dependencies are as follows:

"dependencies": {
    "@mantine/core": "^7.6.2",
    "@mantine/dates": "^7.6.2",
    "@mantine/form": "^7.6.2",
    "@mantine/hooks": "^7.6.2",
    "dayjs": "^1.11.10",
    "next": "14.1.0",
    "react": "^18",
    "react-dom": "^18",
    "uuid": "^9.0.1"
  }

MantineForm.tsx file:

export default function MantineForm() {
    const form = useForm({
        initialValues: {
            visitorName: "",
            firmName: "",
            purposeOfVisit: `${PurposeOfVisit.Subcontractor}`,
            vehicleLicense: "",
            email: "",
            phone: 0,
            visitDateTime: new Date(),
            isSafetyInstructionsGiven: false,
            isGeneralVisitGuideGiven: false,
            isTaskingDocumentReceived: false,
        },

        // validate: {},
    });

and inside MantineForm component, error is in here

<DateTimePicker
     value={form.values.visitDateTime}
     onChange={(val) => form.setFieldValue("visitDateTime", val)}
     label="Ziyaret Tarih ve Saati"
     clearable
     valueFormat="DD.MM.YYYY - HH:mm"
     locale="tr"
/>

val in the part of form.setFieldValue("visitDateTime", val) here gives the below error

Argument of type 'DateValue' is not assignable to parameter of type 'Date | ((prevValue: Date) => Date)'. Type 'null' is not assignable to type 'Date | ((prevValue: Date) => Date)'.ts(2345)

How can I solve this type problem?