3D model texture errors with React-three-fiber in Expo React Native mobile app

I've just started mobile app development and am creating a 3D model loader using React Three Fiber in an Expo React Native app (testing it on my Android device).

I successfully loaded the 3d model, but I haven't been able to load the textures yet. I keep getting this error:

ERROR  THREE.GLTFLoader: Couldn't load texture {"_h": 1, "_i": 2, "_j": [Error: Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported], "_k": null}

This is the code I used:

// components/ModelViewer.tsx
import { useGLTF } from '@react-three/drei'
import React from 'react'
import * as THREE from 'three'
import { GLTF } from 'three-stdlib'

type GLTFResult = GLTF & {
  nodes: {
    Object_382: THREE.SkinnedMesh
    ...
    _rootJoint: THREE.Bone
  }
  materials: {
    material: THREE.MeshBasicMaterial
    ...
  }
}

interface ModelProps {
  [key: string]: any
}

export function Model(props: ModelProps) {
  const { nodes, materials } = useGLTF(require('../assets/models/myModel.glb')) as unknown as GLTFResult
  return (
    <group {...props} dispose={null} scale={[0.2,0.2,0.2]} position={[0, -1.5, 0]}>
      <group rotation={[-Math.PI / 2, 0, 0]}>
        <primitive object={nodes._rootJoint} />
        <skinnedMesh
          geometry={nodes.Object_382.geometry}
          material={materials.material}
          skeleton={nodes.Object_382.skeleton}
        />
        ...
      </group>
    </group>
  )
}

useGLTF.preload(require('../assets/models/myModel.glb'))

export default Model

These are my dependencies:

    "@react-three/drei": "^10.4.4",
    "@react-three/fiber": "^9.2.0",
    "three": "^0.178.0",
    "expo-gl": "~15.1.7",

This is my metro:

// metro.config.js
const { getDefaultConfig } = require('@expo/metro-config');

const config = getDefaultConfig(__dirname);

config.resolver.sourceExts = [
  'js',
  'jsx',
  'json',
  'ts',
  'tsx',
  'cjs',
  'mjs',
];

config.resolver.assetExts = [
  'glb',
  'gltf',
  'png',
  'jpg',
  'ttf',
];

module.exports = config;

and here is how I display it:

// app/Home.tsx
import { Canvas, useFrame } from '@react-three/fiber/native'
import Model from '../components/ModelViewer'
import React, { Suspense, useEffect, useRef, useState } from 'react'
import {  GestureResponderEvent,  PanResponder,  PanResponderGestureState } from 'react-native'
<View
        style={styles.modelContainer}
        {...panResponder.panHandlers}
      >
        <Canvas
          pointerEvents="none"
          style={styles.canvas}
          camera={{ position: [0, 0, 10], fov: 50 }}
          frameloop="always"
          onCreated={({ gl }) => {
            const _gl: any = gl.getContext()
            const p = _gl.pixelStorei.bind(_gl)
            _gl.pixelStorei = (...args: any[]) => {
              if (args[0] === _gl.UNPACK_FLIP_Y_WEBGL) return p(...args)
            }
          }}
        >
          <directionalLight position={[1, 1, 1]} args={['white', 2]} />
          <ambientLight intensity={0.5} />

          <Suspense fallback={null}>
            <GroupWithControls rotation={rotation} zoom={zoom}>
              <Model />
            </GroupWithControls>
          </Suspense>
        </Canvas>
      </View>

I would really appreciate some assistance on this. I've been working on it for a few days now, and I haven't been able to solve it. I tried loading in the textures separately, and followed these two links:

1. https://github.com/wass08/r3f-wawa-eats/blob/main/metro.config.js
2. https://github.com/Rakha112/expo-r3f-drei/blob/main/metro.config.js but I couldn't load the models in the two links either. Please let me know if there's anything else I can provide.