Getting TypeError: Cannot read properties of undefined (reading 'toString') with DatePicker in Ant Design

I am encountering a TypeError in my code that says "Cannot read properties of undefined (reading 'toString')" when using the ant design Date Picker. I have narrowed down the issue to the DatePicker component, but I can't figure out why this error is occurring. The error traceback shows that the error is happening in the m2.isValid function of the dayjs library. However, I haven't called the .toString function anywhere in my code, nor have I accessed the personalInfo.dateOfBirth property directly.

I have a form with a DatePicker component for the "Date of Birth" field. Here's the relevant code:

<div className="info-div w-33">
    <p>
        <Form.Item
            label={<h4 className="text-center" style=>Date of Birth</h4>}
            name={["personalInfo", "dateOfBirth"]}
            rules={[
                {
                    required: true,
                    message: 'Please input your Date of Birth!',
                }
            ]}
        >
            <DatePicker
                style=
                format="DD-MM-YYYY"
            />
        </Form.Item>
    </p>
</div>

When the form is submitted, I send an API request with the form data. Here's the relevant code:

const onFinish = (values) => {
    const cleanData = removeUndefined(values);
    cleanData.user = auth.currentUser._id;
    cleanData.agency = auth.currentUser.createdBy;

    createStudentProfile(cleanData).then(res => {
        console.log(res);
        if (res) {
            navigate("/dashboard");
        }
    });
};

And here's the code for the API request:

export const createStudentProfile = async (body) => {
    try {
        console.log(body);
        const { data } = await axiosInstance.post("/student/create", body);
        toast.success("Successfully created student profile");
        return data;
    } catch (e) {
        console.log(e);
        if (e?.response?.status === 400) {
            toast.error(e.response.data.error);
            return false;
        } else {
            toast.error("A server error occurred");
        }
    }
};

The body object that I'm sending in the API request contains the personalInfo.dateOfBirth property, which is a valid date object. However, I haven't explicitly called the .toString function on this property.

I have come across similar questions on Stack Overflow suggesting the use of the optional chaining operator (?.), but I'm unsure if it applies in my case since I'm not explicitly using the .toString function. Any help would be greatly appreciated.

The body object looks like this:

{
    "academicQualification": {
        "countryOfEducation": "Chad",
        "highestLevelOfEducation": "Post Graduate",
        "education": []
    },
    "_id": "6451e6b8473271e4c1c0d52b",
    "personalInfo": {
        "gender": "Male",
        "dateOfBirth": "This is a date object but it won't copy",
        "maritalStatus": "Unmarried",
        "_id": "6451e6b8473271e4c1c0d52c"
    },
    "nationalityInfo": {},
    "mailingAddress": {},
    "permanentAddress": {},
    "backgroundInfo": {},
    "importantContact": {},
    "passportInfo": {},
    "agency": "6442c63764532ecc839a4cf9",
    "workExperience": []
}