How reset value React Material UI Autocomplete using React Hook Forms

I have two autocomplete components in my form where one depends on the other. I want that at a choice of a field in the first component values in the second were reset. I tried a bunch of ways to do it, but nothing worked. Please, tell me how can I solve this problem?

return (
<FormProvider {...methods}>
  <form onSubmit={handleSubmit(onSubmitAppealForm)}>
    <Grid item container xs={12} sx={{ mt: 2 }} columnSpacing={3}>
      <Grid item xs={6}>
        <SelectControl
          required
          control={control}
          options={[
            { id: 1, name: "1 - Тематика" },
            { id: 2, name: "2 - Категория" },
            { id: 3, name: "3 - Подкатегория" },
          ]}
          placeholder="Уровень тематики"
          label="Уровень тематики *"
          name="themeLevel"
          readonly
        />
      </Grid>
      <Grid item xs={6}>
        <SelectControl
          control={control}
          options={getProjectThemesArray() ?? []}
          disabled={!themeLevel || themeLevel === 1}
          label="Родительская тематика"
          defaultValue=""
          name="parentThemeId"
          loading={isParentThemeFetching}
        />
      </Grid>
    </Grid>
  </form>
</FormProvider>

Autocomplete component:

 return (
<>
  <Controller
    name={name}
    control={control}
    render={({ field: { value, onChange: handleChange } }) => (
      <>
        <div className="form-label">{label}</div>
        <Autocomplete
          onChange={(e, value) => {
            handleChange(e, value);
            onChange && onChange();
          }}
          options={options}
          noOptionsText="Нет данных"
          clearText=""
          closeText=""
          openText=""
          autoHighlight
          disabled={loading || disabled}
          renderInput={(params) => (
            <OutlinedInput
              name={name}
              {...params.InputProps}
              inputProps={{
                ...params.inputProps,
              }}
              value={options.length > 1 ? value?.name : ""}
              readOnly={readonly}
              className={input}
              required={required}
              placeholder={
                defaultValue && disabled
                  ? defaultValue
                  : placeholder ?? label
              }
              fullWidth
            />
          )}
          isOptionEqualToValue={(option, value) => option.id === value.id}
          getOptionLabel={(option) => option.name || ""}
          renderOption={(props, option) => (
            <MenuItem {...props} key={option.id} value={option.id}>
              {option.name}
            </MenuItem>
          )}
          popupIcon={
            <div className={icon}>
              {loading ? <Spinner width={20} height={20} /> : <Arrow />}
            </div>
          }
        />
      </>
    )}
  />
</>

I used reset and setField from useForm to my component but it didn't work. Also, resetting the state of the input did not work either.