react-native images with space in name not loading

I am trying to use an image in my react native app.

I have very little code at this point

This is all the code I have for now

import React from 'react';import { ScrollView, View, Text } from 'react-native';import Image from '@src/assests/images/avatars/Allan Munger.png';import { ImageCircle } from '@src/components/elements';const App = () => {  const [active, setActive] = React.useState(0);  return (<View><ImageCircle uri={Image} active={false} /></View>  );};export default App;

Where ImageCircle is this

import React from 'react';import { View, Text, Image, ImageSourcePropType } from 'react-native';import Styles from './styles';const ImageCircle = ({ active, uri }) => {  console.log('uri', uri);  return (<View      style={{        width: 60,        height: 60,        borderRadius: 30,        borderColor: 'red',        borderWidth: 1,      }}><Image source={uri} width={60} height={60} /></View>  );};export default ImageCircle;

I can't see my image in the circle (or anywhere).

In the console, there is this one log

Asset not found: /Users/varunb/Desktop/project-emma/src/assests/images/avatars/Allan%20Munger@2x.png for platform: ios

Can someone tell me why I can't see the image on my iPhone and why am I getting this error? and how to fix it?

Ps: If I remove space from image import (and rename image as well), then everything works fine i.e

import Image from '@src/assests/images/avatars/AllanMunger.png';

This is what I can see on iPhone (with spaces in import)