جاوااسکریپت - شیء مرجع OrbitControls در سهبعدی React Fiber در تایپاسکریپت در مرحله ساخت خطا میدهد (کد کار میکند)

در حال حاضر در مورد یک خطای تایپاسکریپت مربوط به نوع یک شیء ref گیر کردهام (تا جایی که میدانم). من تازه کار با تایپاسکریپت هستم بنابراین نمیدانم چگونه مشکل را حل کنم!

من تایپاسکریپتی که دریافت کردهام و خطایی که هنگام مرحله ساخت ایجاد میکند را پیوست کردهام. علاوه بر این، من از کتابخانههای react-three-drei و react-three-fiber برای ترکیب شیء three.js استفاده میکنم.

این خطا ایجاد شده است:

src/components/models/web/Plane.tsx:120:22 - error TS2322: Type 'MutableRefObject<OrbitControlsProps | undefined>' is not assignable to type 'Ref<OrbitControls> | undefined'.
  Type 'MutableRefObject<OrbitControlsProps | undefined>' is not assignable to type 'RefObject<OrbitControls>'.
    Types of property 'current' are incompatible.
      Type 'OrbitControlsProps | undefined' is not assignable to type 'OrbitControls | null'.
        Type 'undefined' is not assignable to type 'OrbitControls | null'.

120       <OrbitControls ref={cameraRef} />
                         ~~~

  node_modules/@types/react/index.d.ts:134:9
    134         ref?: Ref<T> | undefined;
                ~~~
    The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & OrbitControlsProps & RefAttributes<OrbitControls>'

و این کد من است:

import {
  MeshDistortMaterial,
  MeshWobbleMaterial,
  OrbitControls,
  OrbitControlsProps,
  PerspectiveCamera,
  PointMaterial,
  Text,
} from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import React, { useContext, useRef } from "react";
import { ThemeContext } from "../../theme/theme";
export default function Box() {
  const cameraRef = useRef<OrbitControlsProps>();
  useFrame(() => {
    var angle = window.scrollY / window.innerHeight;
    cameraRef.current?.setPolarAngle(1.1 + angle / 10);
  });
  console.log(cameraRef);
  const theme = useContext(ThemeContext);
  return (
    <>
      <PerspectiveCamera
        makeDefault ...
      [truncated]
      />

      <OrbitControls ref={cameraRef} />
      <mesh position={[0, 0, 0]} rotation={[-1.5, 0, 0]}>
        <planeBufferGeometry args={[25, 10, 50, 50]} />
        <meshLambertMaterial
          attach="material"
          wireframe
          distort={0}
          color={theme.secondary}
        />
      </mesh>

      <fog
        attach="fog"
        color={theme.primary}
        near={1}
        far={3.5}
        position={[0, 0, 0]}
      />
      <mesh position={[0, 0, 0]}>
        <pointLight color={theme.cta} intensity={4} position={[0, 1, 0]} />
      </mesh>
    </>
  );
}

این همان راهنمایی است که از اینتللیسنس دریافت میکنم:

پاسخ شماره ۱

طبق https://github.com/pmndrs/drei/issues/730، راه حل این است:

import type { OrbitControls as OrbitControlsImpl } from 'three-stdlib'

const ref = useRef<OrbitControlsImpl>(null)

<OrbitControls ref={ref} />

برای من کار میکند.