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)