Fixing Crashing on load of 3D model on React Native

Question

I am trying to load a 3D model on my expo react native project. I read the documentation and have been doing exactly what they told me to do but my app is crashing whenever I try to load it. I am just trying to have the 3D model load but it is just not working. I have tried everything (including restarting, different model). So I was wondering if it has something to do with the code. Here is my metro.config.js code

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.transformer = {
  ...defaultConfig.transformer,
  babelTransformerPath: require.resolve('react-native-svg-transformer'),
};

defaultConfig.resolver = {
  ...defaultConfig.resolver,
  assetExts: [
    ...defaultConfig.resolver.assetExts.filter((ext) => ext !== 'svg'),
    'glb', 
    'gltf', 
    'obj', 
    'png',
    'jpg', 
  ],
  sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'],
};

module.exports = defaultConfig;

and here is screen code that loads the image

import React, { Suspense } from 'react';
import { View, StyleSheet } from 'react-native';
import { Canvas } from '@react-three/fiber/native';
import { OrbitControls, useGLTF, Environment } from '@react-three/drei/native';

function Model({ modelPath }) {
  const gltf = useGLTF(modelPath);

  return <primitive object={gltf.scene} />;
}

export default function Map3D() {
  return (
    <View style={styles.container}>
      <Canvas
        style={styles.canvas}
        gl={{ antialias: true }}
        camera={{ position: [0, 2, 10], fov: 50 }}
      >
        <ambientLight intensity={0.5} />
        <directionalLight intensity={1} position={[5, 10, 5]} />

        <Suspense
          fallback={
            <mesh>
              <boxGeometry args={[1, 1, 1]} />
              <meshStandardMaterial color="gray" />
            </mesh>
          }
        >
          <Environment preset="sunset" />
          <Model modelPath={require('../assets/earth_globe_hologram_2mb_looping_animation.glb')} />
        </Suspense>

        <OrbitControls />
      </Canvas>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
  canvas: {
    flex: 1,
  },
});