Use multiple useRefs in custom component

[tripdragon]

This relates to the docs needing a bit of an upgrade to more common tasks. Its also that im super newb to react.
in a typical scenario I import a <Ball ref={ballRef} /> into a parent.
To access it, it needs a useRef, to do that the components template needs to be rewritten from the docs Box example to have forwardRef().
Now, to have two refs, the one for external and one for internal I found you cant pass an array of refs you have to use useImperativeHandle

OK now all good? No now I need logic objects in the component when I send it a method, in this example I debugger on signal()
Now, in console im expecting I can access meshRef and i can! Now im also expecting I can access any other refs or consts physicsRef, tacos etc... I can not....

How much more hacky do I need to do to make this into a typical object store class.
I'm lost at this point

q&a: what am I trying to do. Simply and properly store values like I would in a class and use this.member within a function

import React, { useRef, useState, forwardRef, useImperativeHandle, useEffect } from 'react';
import { useFrame } from '@react-three/fiber';

import { simplePhysics } from "../utilites/simplePhysics"

// in this example we need 2 refs
// one for internal so we can do animation stuff
// and the forwardref type so the parent component can work with it
// 
// React internal does not allow array refs
// but does have an arcane useImperativeHandle
// which then does more and we are forced to put the functions into it
// it makes for some interesting new way to closure methods, but as per example
// its the only solution to the 2+ ref issue
function Ball(props, ref) {
    
    const refsDerp = {
      mesh : useRef(null),
      physicsRef : useRef(new simplePhysics())
    }
    
    const meshRef = useRef(null);
    
    const tacos = "skdmgldfg";
    
    const physicsRef = useRef(new simplePhysics());
    
    const ppp = useRef(9);
    
    
    useImperativeHandle(ref, () => {
      return {
        fishness(ev){
          signal()
        }
      };
    }, []);
    
    
    useFrame((state, delta) => {
      // meshRef.current.rotation.x += delta;
      // debugger
    });
    
    useEffect(()=>{
      // debugger
    });
    
    function signal(){
      debugger
      // should be able to reach any const be it a string or a useframe from here
      // meshRef.current.position.y += 0.1;
    }
    
    return (
        <mesh
            {...props}
            ref={meshRef}
            signal={signal}
            >
            <sphereGeometry args={[1, 12, 12]} />
            <meshStandardMaterial color={hovered ? 'hotpink' : 'green'} />
        </mesh>
    );
}

export default forwardRef(Ball);

[tripdragon]

DRUMROLLLLL
You need to place a console.log(var) to get it to allow access
Will make a bug issue