React useImerativeHandle не обновляет значение

Question

См. Здесь codeandbox

Я пытаюсь передать значение состояния дочернего компонента его родительскому компоненту, используя React useImperativeHandle. Однако похоже, что мой родительский компонент не получает обновленное значение состояния дочернего компонента, когда консоль регистрирует значение дочернего компонента; console.log(componentRef.current.state) всегда регистрируется как ложь.

Почему это не работает и как я могу точно получить измененное значение состояния моего дочернего компонента в моем родительском компоненте, передав необходимую ссылку? Спасибо!

index.tsx:

import React from "react";
import ReactDOM from "react-dom";

const Component = React.forwardRef((props, ref) => {
  const [state, set] = React.useState(false);

  React.useImperativeHandle(ref, () => ({
    state
  }));

  const handleClick = () => {
    set(prevState => !prevState);
  };

  return (
    <>
      <button type="button" onClick={handleClick}>
        Click Me
      </button>
      <h1>{state ? "On" : "Off"}</h1>
    </>
  );
});

const App = () => {
  const componentRef = React.useRef(null);

  React.useEffect(() => {
    console.log(componentRef.current.state);
  }, [componentRef]);

  return <Component ref={componentRef} />;
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

Если вам просто нужна эта функциональность, вы можете использовать что-то вроде:

import React, { useEffect } from "react";
import ReactDOM from "react-dom";

const Component = props => {
  const [state, set] = React.useState(false);

  useEffect(() => props.callback(state), [state])

  const handleClick = () => {
    set(prevState => !prevState);
  };

  return (
    <>
      <button type="button" onClick={handleClick}>
        Click Me
      </button>
      <h1 >{state ? "On" : "Off"}</h1>
    </>
  );
};

const App = () => {

  return <Component callback={val => console.log(val)} />;
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Но если вам действительно нужно использовать ref, просто прокомментируйте его, поэтому я удалю этот ответ.