I have implemented the following custom hook:

export default function useCamera() {
   const [cameraRatio, setCameraRatio] = useState(Camera.Constants.DesiredRatio);
   const [cameraType, setCameraType] = useState(Camera.Constants.Type.back);
   const [flashMode, setFlashMode] = useState(
      Camera.Constants.FlashMode.off
   );

   const camRef = useRef(null); <----- Interesting part
   const cameraTypeRef = useRef(cameraType);
   const isTakingPhoto = useRef(false);

   const takePhoto = () => {
      if(!camRef.current) return; <----- Interesting part

      ...
   }

   const flip = () => {}

   const toggleFlash = () => {}

   ...

   return {
      camRef,
      cameraRatio,
      cameraType,
      flashMode,
      takePhoto,
      flip,
      toggleFlashMode,
      ...
   }
}

So, in my Camera component, I just do:

function Camera({ ... }) {
   const {
      camRef, <---- Interesting part
      takePhoto,
      ...
   } = useCamera();
  
   return <NativeCamera ref={camRef} onTakePhoto={takePhoto} ... />
}

As you can see, I am passing the camRef to "NativeCamera". This ref is defined in my custom hook "useCamera", and received in my "Camera" component, which just pass the ref to the child.

But this doesn't work. Any workaround?