Как добиться функциональности, подобной рендерингу, с помощью React Hooks?

Question

Я новичок в React Hooks, и я пишу компонент, похожий на Redirector, используя Hooks. Обычно существует приложение root, которое отображает все, что должно быть возвращено функцией StateManager, в поле currentStateDetails. Компоненты Step1 и Step2 имеют кнопки, которые должны переходить к следующим шагам и так далее. Где я ошибаюсь в своем понимании? Приложение root правильно отображает исходный компонент, но никогда не обновляется при щелчках из компонентов шага.

const StateManager = () => {
const [currentStateDetails, setCurrentStateDetails] = useState({
    componentToRender: <Step1 />,
    currentUserState: 'default'
  });
const [bool, setBool] = useState(false);
const updateView = (dir) => {
    setBool(true);
  };
useEffect(() => {
    if (bool) {
      setCurrentStateDetails({
        componentToRender: <Step2 />,
        currentUserState: 'step-2'
      });
    }
   }, [bool]);
  return [{ currentStateDetails }, updateView];
}