我一直在尝试向我正在构建的应用程序添加滚动区域，但我一直收到此错误：

Uncaught Div is not part of the THREE namespace! Did you forget to extend?

我对 three.js 很陌生，而且由于我使用 React，它更加复杂。

这是应用程序组件的代码（错误似乎源自此处：

import './App.css';
import Header from "./Header";
import WebFont from "webfontloader";
import { useEffect, useRef } from "react";
import { Canvas } from "@react-three/fiber";
import Intro from "./Intro";
import { Stars } from "@react-three/drei";
import About from "./About";
import state from "./state";

function App() {
  useEffect(() => {
    WebFont.load({
      google: {
        families: ["Cookie", "Lora", "Playfair Display", "Inknut Antiqua", "Cormorant", "Share Tech Mono"]
      }
    });
  }, []);

  const domContent = useRef();
  const scrollArea = useRef();
  const onScroll = (e) => (state.top.current = e.target.scrollTop);
  useEffect(() => void onScroll({ target: scrollArea.current }), []);

  return (
    <div className="App">
      <Header />
      <Canvas camera={{ position: [0, 0, 120], fov: 70 }}>
        <Stars radius={300} depth={60} factor={7} fade={true} />
        <pointLight color="white" position={[5, 2, 5]} intensity={1.3} />
        <Intro domContent={domContent} />
        <About domContent={domContent} />
      </Canvas>
      <div className="scrollArea" ref={scrollArea} onScroll={onScroll}>
        <div style={{ position: "sticky", top: 0 }} ref={domContent}></div>
        <div style={{ height: `${state.pages * 100}vh` }}></div>
      </div>
    </div>
  );
}

export default App;