React-native failed propType on Image component

I am just starting out with React-native and have a pretty decent grasp on React for creating web apps... I am running into a confusing issue here that never occured when working with react for the web.

Basically I am rendering a component whose image is being dynamically generated by mapping over an array of objects in its parent component.

export default class ImageComponent extends React.Component {
  render() {
    return (
        <Image source={this.props.source}/>
    );
  }
};

And its parent component:

export default class MainComponent extends React.Component {
  constructor(props) {
    super(props);
   this.state = {
      images:[
        { src: './src/images/1.png'},
        { src: '/src/images/2.png'},
        { src: './src/images/3.png'}
      ]
    }
   }

  render() {
    let images = this.state.images.map((image) => {
      return(<ImageComponent source={image.src}  />);
    })

    return (
      <View>
        {images}
      </View>
    );
  }
};

In device simulator I am getting the following error:

"Warning: Failed propType:Invalid prop 'source' supplied to 'Image' check the render method of 'BasicComponent'"

Does anyone know what could be going on here?

You should either require the local assets or use object with uri key.

So either in MainComponent:

this.state = {
  images:[
    require('./src/images/1.png'),
    require('./src/images/2.png'),
    require('./src/images/3.png')
  ]
}

or in BasicComponent:

return (
  <Image 
    source={{uri: this.props.source}}
  />
);

you should be use uri for set source image

return (
  <Image 
    source={{uri: 'https://reactnative.dev/docs/assets/p_cat2.png'}}
  />
);