the autocomplete option labels are not getting cleared when reset() onSubmit(), is something wrong with this code or mui autocomplete issue?

Question

Hi here I am building a form with material ui autocomplete component and react-hook-form useController and useForm, as mui select component's option labels are getting clear on form reset but with autocomplete it is not happening, though its value gets cleared on reset as wanted, so is something wrong with this code or autocomplete issue,

Registered with useController (react-hook-form)

import React from "react";
import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";
import { useController, UseControllerProps } from "react-hook-form";

//type Multi = string;
interface MultiOptionInterface {
  label: string;
  value: string;
}
interface Props extends UseControllerProps {
  label: string;
  type?: React.HTMLInputTypeAttribute | undefined;
  id: string;
  placeholder?: string | undefined;
  multiSelectOptions: MultiOptionInterface[];
}
export function RegisteredMultiAutocomplete({
  name,
  control,
  label,
  type,
  id,
  placeholder,
  multiSelectOptions
}: Props) {
  const {
    field: { ref, onChange, ...inputProps },
    fieldState: { error },
    formState: { isSubmitSuccessful }
  } = useController({
    name,
    control,
    defaultValue: ""
  });

  return (
    <Autocomplete
      fullWidth
      id={id}
      multiple
      clearOnEscape
      options={multiSelectOptions}
      getOptionLabel={(option: MultiOptionInterface) => option.label}
      renderInput={(params) => (
        <TextField
          {...inputProps}
          {...params}
          inputRef={ref}
          error={!!error}
          helperText={error ? error.message : null}
          variant="outlined"
          margin="normal"
          label={label}
          type={type}
          placeholder={placeholder}
        />
      )}
      onChange={(_, data) => {
        onChange(data);
        return data;
      }}
    />
  );
}

export default RegisteredMultiAutocomplete;

onSubmit() code

import React from "react";
import { useForm } from "react-hook-form";
import * as Yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { Box, Button } from "@mui/material";
import { RegisteredMultiAutocomplete } from "./RegisteredMultiAutocomplete";
interface FormInputs {
  productCategories: string[];
}
const indcat = [
  { label: "Car", value: "Car" },
  { label: "Bike", value: "Bike" },
  { label: "Bus", value: "Bus" },
  { label: "Truck", value: "Truck" },
  { label: "Van", value: "Van" },
  { label: "Jeep", value: "Jeep" },
  { label: "Tractor", value: "Tractor" }
];

export function App() {
  const validateSchema = Yup.object().shape({
    productCategories: Yup.array().required("Product category is required")
  });
  const { handleSubmit, control, reset } = useForm({
    mode: "onChange",
    resolver: yupResolver(validateSchema)
  });

  const onSubmit = (data: unknown) => {
    console.log(data);
    reset();
  };

  return (
    <Box component="form" onSubmit={handleSubmit(onSubmit)}>
      <RegisteredMultiAutocomplete
        id="product-categories"
        name="productCategories"
        control={control}
        label="Select Product Categories"
        type="text"
        placeholder="Category"
        multiSelectOptions={indcat}
      />
      <Button type="submit" color="primary" variant="contained">
        {" "}
        Submit
      </Button>
    </Box>
  );
}
export default App;

here is the app on codesandbox

on submit the value of autocomplete gets cleared but the option label not

expecting the autocomplete option label should get cleared on reset()