Formik validation does not work correctly with Material UI Autocomplete

[lazyav]

I feel its the bug in formik.

The sandbox link is https://codesandbox.io/p/sandbox/formik-autocomplete-yh3sl7?file=%2Fsrc%2FApp.tsx%3A1%2C1-84%2C1

1. When the form initial loads with default value. Clearing the value does not trigger the validation.

2. Refresh the page. Click on submit. Clear the default value, form validation triggers

                        ![image](https://github.com/jaredpalmer/formik/assets/106724931/a5bd7b49-86a0-45cf-a2b8-0ba40657bca7)
   

3. Refresh the page. Click on submit. Clear the default value, form validation triggers. Again click on submit after that Clearing the value does not trigger the validation.

                        ![image](https://github.com/jaredpalmer/formik/assets/106724931/f6c6a332-2517-45b8-a7b5-eb057435f74d)
   

import "./styles.css";
import { object, string } from "yup";
import { useFormik } from "formik";
import { useState } from "react";
import { Autocomplete, Box, TextField } from "@mui/material";

export default function App() {
  const parentCategory = [
    {
      id: "983868dc-106d-446b-822c-ff03e62099c6",
      name: "Electronics",
    },
    {
      id: "7c7ae7a1-bb3b-4c9d-8da2-91c2bf063875",
      name: "q",
    },
    {
      id: "4066deae-7144-40f1-99ab-cc9cf862eb8a",
      name: "Root",
    },
    {
      id: "28c9bd93-9f22-4753-8d63-3dcc4839eb07",
      name: "s",
    },
    {
      id: "6c4245e1-5cc1-4b07-b718-e47a2e0f33ea",
      name: "Television",
    },
  ];
  let categorySchema = object({
    parentId: string().required("Parent category is required.").nullable(),
  });

  const [formData, setFormData] = useState({
    name: "",
    parentId: "4066deae-7144-40f1-99ab-cc9cf862eb8a",
  });

  const initialCategoryValue = {
    name: "Root",
    id: "4066deae-7144-40f1-99ab-cc9cf862eb8a",
  };

  const formik = useFormik({
    initialValues: formData,
    validationSchema: categorySchema,
    onSubmit: (values) => {
      debugger;
    },
  });

  return (
    <div className="App">
      <form onSubmit={formik.handleSubmit}>
        <Autocomplete
          id="ddParentCategory"
          size="small"
          sx={{ width: 300 }}
          getOptionLabel={(option) => option.name}
          getOptionKey={(option) => option.id}
          options={parentCategory}
          renderInput={(params) => (
            <TextField
              {...params}
              label="Parent Category"
              name="parentId"
              error={formik.touched.parentId && Boolean(formik.errors.parentId)}
              helperText={formik.touched.parentId && formik.errors.parentId}
            />
          )}
          isOptionEqualToValue={(option, value) => option.id === value.id}
          defaultValue={initialCategoryValue}
          onChange={(e, value, reason) => {
            formik.setFieldValue("parentId", value?.id);
            console.log(value?.id);
            console.log(formik.getFieldMeta("parentId"));
          }}
        />
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}