Material-UI date picker component not working properly on Safari

I am building a React app and using a material-ui-pickers Date Picker component inside a custom component that also uses formik form, and yup for validation. The component is working fine on different browsers, but is giving me both the errors from inside the component (using the formik+yup validation) and the built in invalidDateMessage attribute of the Date Picker component when on Safari. The reason I believe the issue has something to do with the material-ui-pickers Date Picker is that in the form i have other Material-UI fields, all working fine on all browsers.

I tried looking up similiar issues but haven't found any, also playing around with the validation (changing date() to string()) did not work.

I am playing around with the value on change to be able to get a string out of the date, but without it the component won't work at all so I assume this is not the issue.

The component:

import moment from "moment";
import MomentUtils from "@date-io/moment";
import React from "react";
import { FormHelperText } from "@material-ui/core";
import { Field, ErrorMessage } from "formik";
import { DatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";

const FormikDatePicker = ({
    name,
    label,
    disablePast = false,
    disableFuture = false,
    ongoing = false,
    disableEnd = false,
}) => {
    const convertDateToString = (d) => {
        return d.format("MM-DD-YYYY");
    };

    return (
        <Field name={name}>
            {({ form, field, meta }) => {
                return (
                    <MuiPickersUtilsProvider utils={MomentUtils}>
                        <DatePicker
                            id={name}
                            disableFuture={disableFuture}
                            disablePast={disablePast}
                            label={label}
                            value={form.values[name]}
                            disabled={ongoing && disableEnd}
                            onChange={(v) =>
                                form.setFieldValue(name, convertDateToString(v))
                            }
                            onBlur={field.onBlur}
                            fullWidth
                            disableToolbar
                            autoOk
                            openTo="year"
                            format="DD/MM/yyyy"
                            views={["year", "month", "date"]}
                            variant="inline"
                            inputVariant="outlined"
                            error={!!(meta.touched && meta.error)}
                            
                            invalidDateMessage="this is the built in error"
                        />
                        <ErrorMessage name={name}>
                            {(error) => {
                                return (
                                    <FormHelperText style={{ color: "red" }}>
                                        Required field.
                                    </FormHelperText>
                                );
                            }}
                        </ErrorMessage>
                    </MuiPickersUtilsProvider>
                );
            }}
        </Field>
    );
};

export default FormikDatePicker;

Yup validation:

export const pageThree = object({
    "Country of residence": string("Please enter a valid country name.")
        .min(2, "Required field.")
        .required("Required field."),
    "City of residence": string("Please enter a valid city name.")
        .min(2, "Required field.")
        .required("Required field."),
    Nationality: string("Please enter a valid value.").required(
        "Required field."
    ),
    "Date of Birth": date("Required field.").required("Required field."),
});