我正在做一個HTML/CSS/React/JS項目，想要重構我將變量分配給不同類元素的重復行。在這個例子中，我有一個事件監聽器，它根據窗口大小改變div的比例。

import React from 'react';

function Home() {
  const [scrollX, setScrollX] = React.useState(document.body.scrollWidth);
  const [scrollY, setScrollY] = React.useState(document.body.scrollHeight);

  const resizeCallback = () => {
    const rotateName = document.querySelector('.rotateName');
    const y = document.body.scrollHeight / scrollY;
    const x = document.body.scrollWidth / scrollX;

    rotateName.style.scale = x * y * 1.2;
  };

  React.useEffect(() => {
    window.addEventListener('resize', resizeCallback);

    return () => {
      window.removeEventListener('resize', resizeCallback);
    };
  }, []);

  return (
    <div className="home">
      <div className="rotateName">
        <p>My name is</p>
        <div className="firstN"><h1>John</h1></div>
        <div className="lastN"><h1>Doe</h1></div>
      </div>
    </div>
  );
}

export default Home;

當我將第8行(resizeCallback內部)的rotateName放在Home函數中最外層的作用域(如第6行)時，它停止工作。我對作用域和閉包的理解是，在塊外部聲明的變量可以在內部函數中使用？

這個問題是否與React.useEffect()的過程有關，或者是我對閉包的概念誤解？