Material UI AutoComplete Cascading dropdown selection displayed value is not cleared

Question

I have dependent dropdowns(Category and SubCategory). I am using AutoComplete of material UI for the dropdowns. When I change Category selection SubCategory dropdown values are changed but the displayed value in the textbox of the dropdown is not cleared eventhough I have subCategory state to empty("") inside onChange of Category.

const MuiAutocomplete = (props: any) => {
    const { id, disabled, options, value, onChange } = props;
    const initValue = options?.find((item) => item.value === value);
    const [val, setVal] = useState(initValue);
    const handleChange = (
        event: React.SyntheticEvent<Element, Event>,
        option: any
    ) => {
        setVal(option);
        onChange(option);
    };

    return (
        <Autocomplete
            id={id}
            autoHighlight
            disabled={disabled}
            options={options}
            value={val}
            onChange={handleChange}
            getOptionLabel={(option) => (option?.text)}
            renderInput={(params) => <TextField {...params} />}
        />
    );
};

const handleCategoryChange = (option: any) => {
     setSelectedSubCategory("")
}