I can't seem to get useTexture to load my texture what am I doing wrong?

Question

My code is as follows

import { useRef, Suspense } from "react";
import { StyleSheet, View } from "react-native";
import { Canvas, useFrame, useLoader } from "@react-three/fiber";
import { useTexture } from "@react-three/drei";

function Earth(props) {
  const dayTexture = useTexture('textures/earth_textures/earth.jpeg');
  const mesh = useRef();

  useFrame(() => {
    if (mesh && mesh.current) {
      mesh.current.rotation.x = mesh.current.rotation.x + 0.01;
    }
  });

  return (
    <mesh 
      {...props}
      ref={mesh}
      scale={[1,1,1]}
    >
      <sphereGeometry attach="geometry"/>
      <Suspense fallback={null}>
        <meshStandardMaterial
          map={dayTexture}
          attach="material"
        />
      </Suspense>
    </mesh>
  )
}

export default function App() {
  return (
    <View style={styles.container}>
      <Canvas>
        <directionalLight position={[0.5, 0.5, 0.5]} intensity={4} />
        <Earth position={[0, 0, 0]} />
      </Canvas>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "black",
  },
});

I've looked through many different sources and tutorials and I believe I am doing the same thing but for some reason I keep getting this error

Error: Could not load ./textures/earth_textures/earth.jpeg: Unable to download file: Error Domain=NSURLErrorDomain Code=-1002 "unsupported URL" UserInfo={NSErrorFailingURLStringKey=./textures/earth_textures/earth.jpeg, NSErrorFailingURLKey=./textures/earth_textures/earth.jpeg, _NSURLErrorRelatedURLSessionTaskErrorKey=(
    "BackgroundDownloadTask <88188764-6D9F-4970-9903-A55F9C435B72>.<1>"
), _NSURLErrorFailingURLSessionTaskErrorKey=BackgroundDownloadTask <88188764-6D9F-4970-9903-A55F9C435B72>.<1>, NSLocalizedDescription=unsupported URL})

This error is located at:
    in Unknown
    in FiberProvider
    in CanvasWrapper (created by App)
    in RCTView (created by View)
    in View (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes

I tried just using useLoader from fiber because I expected that the drei helper might be the issue but it wasn't. I also tried multiple different image files of different formates along with changing the location of the file to no avail.