UseRef.current существует, но имеет значение null в зависимости от области действия

Я пытаюсь нарисовать изображение на холсте, используя React и Fabric.js.
Демо (CodeSandBox)

В приведенной выше демонстрации при нажатии кнопки «Нарисовать изображение» можно было бы ожидать, что изображение будет немедленно нарисовано на холсте, но изображение на холсте не рисуется.

Причина, по которой изображение не рисуется, по-видимому, заключается в том, что ток useRef равен нулю при выполнении функции рисования изображения на холсте. (Если условие isInput в строке 50 удалено, containerRef.current больше не равно нулю, и изображение может рисовать на холсте.)

Не могли бы вы помочь мне нарисовать изображение на холсте?

Код выглядит следующим образом.

const App = () => {
  const [img, setImg] = useState(defaultImg);
  const changeImg = ({ target: { value } }: { target: { value: string } }) =>
    setImg(value);

  const [isInput, setIsInput] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  const checkCurrent = (caller: string) => {
    console.info(`[${caller}]Container: ${containerRef.current}`);
  };
  useEffect(() => {
    if (!isInput) return;

    checkCurrent("useEffect");
  }, [isInput]);

  const drawImg = (e: { preventDefault: () => void }) => {
    e.preventDefault();
    if (!img) return;
    setIsInput(true);

    checkCurrent("drawImg");

    canvas = new fabric.Canvas("canvas");
    fabric.Image.fromURL(img, (imgObj: fabric.Image) => {
      canvas.add(imgObj).renderAll();
    });
  };

  return (
    <div className = "App">
      {!isInput && (
        <form onSubmit = {drawImg}>
          Demo image url
          <input type = "text" onChange = {changeImg} defaultValue = {img} />
          <button type = "submit">Draw image</button>
        </form>
      )}

      {isInput && (
        <>
          <button onClick = {() => setIsInput(false)}>Reset</button>
          <div ref = {containerRef} className = "canvas_container">
            <canvas ref = {canvasRef} id = "canvas" />
          </div>
        </>
      )}
    </div>
  );
};

export default App;

Я понимаю, что containerRef.current равно нулю, если нет DOM.

Однако,

1. div, которому установлен containerRef, рисуется setIsInput(true)
2. containerRef.current полученное внутри useEffect не равно нулю.

Исходя из вышеизложенного, мы можем ожидать, что containerRef.current не равно нулю даже внутри функции drawImg.