React-three-fiber: Type '(texture: Texture) => Element' is not assignable to type 'ReactNode & ((tex: Texture) => ReactNode)' Error

Questions
1

I am trying to recreate the following example from pmndrs/drei camera-cubecamera

Here is a Code-Sandbox with my Repository react-three-example - CodeSandbox containing the error and which packages I use. I use the same code like from the pmndrs/drei storybook example.

My best guess is that because I use newer versions of Three.js and react-three-fiber it happens but I am not 100% sure. Maybe someone can point me in a direction? Thanks in advance

ERROR in src/pages/Showcase/Showcase.tsx:32:7

TS2322: Type '(texture: Texture) => Element' is not assignable to type 'ReactNode & ((tex: Texture) => ReactNode)'.
  Type '(texture: Texture) => Element' is not assignable to type 'string & ((tex: Texture) => ReactNode)'.
    Type '(texture: Texture) => Element' is not assignable to type 'string'.
    30 |   return (
    31 |     <CubeCamera {...props}>
  > 32 |       {(texture) => (
       |       ^^^^^^^^^^^^^^^
  > 33 |         <mesh ref={ref}>
       | ^^^^^^^^^^^^^^^^^^^^^^^^
  > 34 |           <sphereGeometry args={[5, 64, 64]} />
       | ^^^^^^^^^^^^^^^^^^^^^^^^
  > 35 |           <meshStandardMaterial roughness={0} metalness={1} envMap={texture} />
       | ^^^^^^^^^^^^^^^^^^^^^^^^
  > 36 |         </mesh>
       | ^^^^^^^^^^^^^^^^^^^^^^^^
  > 37 |       )}
       | ^^^^^^^^^
    38 |     </CubeCamera>
    39 |   );
    40 | };

from the pmndrs/drei storybook example: CubeCamera.stories.tsx

function Sphere({ offset = 0, ...props }) {
24  const ref = React.useRef<THREE.Group>()
25  useFrame(({ clock }) => {
26    ref.current!.position.y = Math.sin(offset + clock.elapsedTime) * 5
27  })
28
29  return (
30    <CubeCamera {...props}>
31      {(texture) => (
32        <mesh ref={ref}>
33          <sphereGeometry args={[5, 64, 64]} />
34          <meshStandardMaterial roughness={0} metalness={1} envMap={texture} />
35        </mesh>
36      )}
37    </CubeCamera>
38  )
39}

My code: src/pages/Showcase/Showcase.tsx:32:7

const Sphere = ({ offset = 0, ...props }) => {
  const ref = React.useRef<THREE.Group>();
  useFrame(({ clock }) => {
    ref.current!.position.y = Math.sin(offset + clock.elapsedTime) * 5;
  });

  return (
    <CubeCamera {...props}>
      {(texture) => (
        <mesh ref={ref}>
          <sphereGeometry args={[5, 64, 64]} />
          <meshStandardMaterial roughness={0} metalness={1} envMap={texture} />
        </mesh>
      )}
    </CubeCamera>
  );
};
2

u manage to find a solution? im getting the same typescript error. thanks

3

this might be a wrong type drei/CubeCamera.tsx at 02c140e42af6ee6751819350a18d15ee57d74133 · pmndrs/drei · GitHub

type Props = JSX.IntrinsicElements['group'] & {
  /** The contents of CubeCamera will be hidden when filming the cube */
  children: (tex: Texture) => React.ReactNode

im not so good with TS but im guessing it should be this?

type Props = Omit<JSX.IntrinsicElements['group'], "children"> & {
  /** The contents of CubeCamera will be hidden when filming the cube */
  children: (tex: Texture) => React.ReactNode