ref to mesh is always undefined or null

[mariovde-IIO]

Hi all,

I am currently creating an application that uses react three that loads a model and animates it on scroll, using GSAP.
Problem:
The ref 'meshRef.current' is always undefined or null no matter what I do, or write.

I already tried to wrap the

<SplineElement rotation={[0, -1, 0]} ref={meshRef as React.RefObject<Group<Object3DEventMap>>} />

with a separate mesh and assigning the ref to that, but alway null or undefined.
I read the docs on it already, but no solution: https://docs.pmnd.rs/react-three-fiber/tutorials/typescript

What am I doing wrong?

thanks!

full code for container
`
import { ReactNode, useRef, useEffect, Suspense } from "react";
import style from "./style.module.css";
import { SplineElement } from "../SplineElement";
import { Environment } from "@react-three/drei";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { Canvas } from "@react-three/fiber";
import { Group, Object3DEventMap } from "three";
type Props = {
children: ReactNode;
};
gsap.registerPlugin(ScrollTrigger);

    export const SplineContainer = ({ children }: Props) => {
      const meshRef = useRef<Group>();
      const wrapperRef = useRef<HTMLDivElement>(null);
      const parentRef = useRef<HTMLDivElement>(null);
      const childrenRef = useRef<HTMLDivElement>(null);
    
      useEffect(() => {
        const element = meshRef.current;
        const wrapper = wrapperRef.current;
    
        if (element && wrapperRef) {
          gsap.to(element.position, {
            scrollTrigger: {
              trigger: wrapper,
              start: "top top",
              scrub: true,
              end: "top bottom",
              markers: true,
              toggleActions: "play none reverse reset",
              onUpdate: (event) => console.log(event),
            },
            x: () => {
              const val = -window.innerWidth / 2;
              console.log(val);
              return val;
            },
            y: () => {
              const val = -window.innerHeight / 2;
              console.log(val);
              return val;
            },
          });
        }
      }, [meshRef, wrapperRef]);
    
      useEffect(() => {
        // move the content up, equal to the height of the animation element
        const height = parentRef.current?.getBoundingClientRect().height;
        if (childrenRef.current) {
          childrenRef.current.style.setProperty("margin-top", `-${height}px`);
        }
      }, [parentRef]);
    
      return (
        <Suspense fallback="">
          <div className={style.wrapper} ref={wrapperRef}>
            <div
              id="three"
              className={style.three}
              style={{
                left: "70%",
              }}
              ref={parentRef}
            >
              <Canvas>
                <ambientLight intensity={1.5} />
    
                <SplineElement
                  rotation={[0, -1, 0]}
                  ref={meshRef as React.RefObject<Group<Object3DEventMap>>}
                />
    
                <Environment preset="sunset" />
              </Canvas>
            </div>
            <div ref={childrenRef}>{children}</div>
          </div>
        </Suspense>
      );
    };`

and the SplineElement

`
import { useGLTF } from "@react-three/drei";
import { Ref, forwardRef } from "react";
import { Group, Object3DEventMap } from "three";
type Props = {
rotation: [number, number, number];
ref: Ref<Group>;
};
export const SplineElement = forwardRef((props: Props, ref) => {
const { rotation } = props;
const { nodes, materials } = useGLTF("/glbs/Smartphone.glb");
return (
<group
ref={ref as Ref<Group>}
dispose={null}
rotation={rotation}
scale={[1, 1, 1]}
position={[0.1, 0, 4.78]}
>
<mesh
castShadow
receiveShadow
geometry={nodes.SmartPhone_Body.geometry}
material={materials["SmartPhone_back.001"]}
rotation={[Math.PI / 2, 0, 0]}
scale={[0.012, 0.005, 0.013]}
>
<group position={[0.006, 0.373, -8.349]}>
<mesh
castShadow
receiveShadow
geometry={nodes.Plane007.geometry}
material={materials["SmartPhone_back.001"]}
/>



<mesh
castShadow
receiveShadow
geometry={nodes.SmartPhone_Switch001.geometry}
material={materials["SmartPhone_back.003"]}
position={[2.94, -0.01, -8.753]}
rotation={[-Math.PI / 2, 0, 0]}
scale={[4.777, 2.283, 10.136]}
/>
<mesh
castShadow
receiveShadow
geometry={nodes.SmartPhone_Switch002.geometry}
material={materials["SmartPhone_back.004"]}
position={[2.947, 0, -7.648]}
rotation={[-Math.PI / 2, 0, 0]}
scale={[5.814, 5.37, 13.69]}
/>


);
});

          useGLTF.preload("/glbs/Smartphone.glb");

`

[mariovde-IIO]

update:

I added this to the mesh componentn

type Props = {
rotation: [number, number, number];
ref: Ref<Group>;
onLoad: () => void;
};
export const SplineElement = forwardRef((props: Props, ref) => {
const { rotation, onLoad } = props;
const { nodes, materials } = useGLTF("/glbs/Smartphone.glb");

useEffect(() => {
onLoad();
}, [onLoad]);

Making it so, that it called a function on the parent, so that I can do a state update, triggering the useEffect again. That seemed to work.