'React hook form V7 | reset form | material ui Autocomple

I have a react hook form with controller and I am also using matrail-ui autocomplete

When I reset my react hook form it reset the value of the form but the displaying value is still there.

<Controller
    control={control}
    name="account"
    render={({ field: { onChange, value, ...field } }) => (
        <Autocomplete
            onChange={(event, item) => {
                onChange(item);
            }}
            options={account}
            getOptionLabel={item => item.value}
            renderInput={params => (
                <TextField
                    {...field}
                    {...params}
                    value={value}
                    label="Account"
                    variant="outlined"
                    error={!!errors.account}
                />
            )}
        />
    )}
/>
const account: IObject[] = [
    { id: 1, value: 'SUITE' },
    { id: 2, value: 'PACKARD' },
    { id: 3, value: 'PACKAR' },
    { id: 4, value: 'OFFERT' },
    { id: 5, value: 'ERREUR' },
    { id: 6, value: 'ENC' },
    { id: 7, value: 'PERM' },
    { id: 8, value: 'ADMOFFERT' },
    { id: 9, value: 'ADMINIS' },
    { id: 10, value: 'ADM ' },
];
    const {
        control,
        handleSubmit,
        reset,
        formState: { errors },
    } = useForm<FormValues>({
        resolver: yupResolver(validationSchema),
    });

    function onReset() {
        reset();
    }

I want to clear the form and the displaying value.

It is look like the option label is not refreshing.

What I am doing wrong ?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source