Im running into alot of issues trying to run react three fiber on react native app(expo sdk 52). I have a simple box setup but get error saying 'cannot convert undefined value to object'. I tried playing around with different r3f versions and have yet to figure it out. New to r3f so any help would be appreciated.

"expo": "~52.0.37",
"@react-three/drei": "^8.8.0",
"@react-three/fiber": "^8.18.0",
"three": "^0.174.0",
"react": "^18.3.1",
"react-dom": "18.3.1",
"expo-gl": "~11.0.2",

import React from "react";
import { Canvas } from "@react-three/fiber/native";
import { View } from "react-native";
import * as THREE from "three";

const Box = () => {
  return (
    <View style={{ flex: 1 }}>
      <Canvas>
        <ambientLight intensity={0.5} />
        <pointLight position={[10, 10, 10]} />
        <mesh>
          <boxGeometry args={[1, 1, 1]} />
          <meshStandardMaterial color="blue" />
        </mesh>
      </Canvas>
    </View>
  );
};

export default Box;


 TypeError: Cannot convert undefined value to object

Tried updating and downgrading different versions of r3f, expo-gl but get same error. I tried importing GLTF using useGLTF and still was not succesful in rendering an object.