当react-bootstrap和react- Three/drei组合时，<Button>中出现union type that is Too Complex错误

Question

现象

当react-bootstrap和react- Three/drei结合使用时，react-bootstrap中出现以下错误

表达式生成的联合类型太复杂而无法表示。ts(2590)

代码位于下面的代码沙箱中。

https://codesandbox.io/s/react-r3f-r3d-bootstrap-t7111f?file=/src/App.tsx

文件名：App.tsx 行：40

import "./styles.css";
import { useRef } from "react";
import { Button } from "react-bootstrap";
import { Canvas, useFrame } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

const Box = (props: JSX.IntrinsicElements["mesh"]) => {
  const ref = useRef<THREE.Mesh>(null!);

  useFrame((state) => {
    ref.current.rotation.x += 0.01;
    ref.current.rotation.y += 0.01;
    ref.current.rotation.z += 0.01;
  });
  return (
    <mesh ref={ref} {...props}>
      <boxBufferGeometry />
      <meshPhysicalMaterial color="blue" />
    </mesh>
  );
};
export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <div style={{ height: "50vh", width: "50vw" }}>
        <Canvas
          style={{ background: "black" }}
          camera={{ position: [3, 3, 3] }}
        >
          <ambientLight intensity={0.5} />
          <Box position={[1, 1, 0]} />
          <OrbitControls enableDamping={false} attach="orbitControls" />
          <axesHelper args={[2]} />
        </Canvas>
      </div>

      <Button type="submit">Action</Button>
    </div>
  );
}

尝试过

从原始代码中删除 OrbitControls 函数并导入 TestScreen.tsx 中的“@react-third/drei”后，错误消失了。

下面是代码 https://codesandbox.io/s/react-r3f-bootstrap-67e01z?file=/src/App.tsx

可能的原因

从上面，我猜测“@react- Three/drei”和“react-bootstrap”冲突。

但我找不到如何纠正错误。我的项目需要这两个包。

我还阅读了下面的问题，但无法解决我的问题。 https://github.com/react-bootstrap/react-bootstrap/issues/6283

如果您能告诉我如何纠正错误，或者没有办法纠正错误，那将会很有帮助。

感谢您阅读本文