React Hook Form: как сбросить value у select'ов

Есть 3 Select'a, каждый последующий зависит от предыдущего. Хочу, чтобы при смене value у предыдущего - сбрасывались value у последующих.

Для Select'ов использую React-Select, для работы с формами React Hook Form. Сейчас отслеживаю состояние с помощью useEffect'ов. Option's в зависимых Select'ах меняются, но value не сбрасываются по сценарию, который я описал выше.

Все стэйты без current - это options для селектов. Все стэйты с current - это выбранные value в селектах. Чтобы было понятнее, как выглядят данные с которыми я работаю:

Так выглядят useEffect'ы:

 useEffect(() => {
    setType(typeAndCategories);
    setCurrentType(typeAndCategories[0].type);
  }, []);

  useEffect(() => {
    setCategoryName(
      type.find((item: any) => item.type === currentType)?.categoryArr || []
    );
  }, [type, currentType]);

  useEffect(() => {
    setSubCategories(
      categoryName.find((item: any) => item.type === currentCategoryName)
        ?.categoryArr || []
    );
  }, [categoryName, currentCategoryName]);

Крутым дополнением к ответу будет, если пнете меня в ту часть документации react-hook-form, которая поможет мне зарефакторить эту кашу. Спасибо!