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

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()