How to know that or in React Native has failed to fetch an image from the uri and show images from the project files

Question

i am using the FastImage to display an image as a profile picture in my react native app, and if it will failed to fetch an profile picture (Image) from the provided uri for any kind of error, i want to show the image stored in my project files.

You can see images before users: UjiOP & Yellow1! in this image here: All users screen

it is not showing an image because there are no images available due to some error, and i want to show the image of person_icon like other chats are showing except the user: lily that is showing the actual image from the uri.

i have used flatlist on this screen and rendering component like this:

 <FlatList
      showsVerticalScrollIndicator={false}
      contentContainerStyle={{
        paddingBottom: hp(10),
        paddingHorizontal: wp(2),
      }}
      data={ListData}
      renderItem={item => {
        return (
          <AllUserlist
            UserName={item.item.username}
            DarkTheme={IsDarkTheme}
            Email={
              item.item.email.toLowerCase() === CurrentUser.toLowerCase()
                ? null
                : item.item.email
            }
            ProfilePic={item?.item?.profile_picture}
            OnPressItem={() => {
              // Pass and merge params back to home screen
              navigation.navigate({
                name: 'Home',
                params: {post: item?.item},
                merge: true,
              });
            }}
          />
        );
      }}
    />

Here is the component which is showing images using FastImage library:

return (
<TouchableOpacity onPress={props.OnPressItem} activeOpacity={0.5}>
  <View>
    {props.Email === null ? null : (
      <View
        style={{
          height: hp(8),
          justifyContent: 'space-evenly',
          flexDirection: 'row',
          alignItems: 'center',
          marginVertical: hp(0.7),
        }}>
        <View style={{borderRadius: 100, overflow: 'hidden'}}>
          <FastImage
            source={
              props?.ProfilePic == null
                ? images.person_icon
                : {uri: props?.ProfilePic}
            }
            style={{
              height: hp(7.2),
              width: wp(14.7),
              resizeMode: props?.ProfilePic == null ? 'contain' : 'cover',
            }}
          />
        </View>
        <View style={{flex: 1, marginLeft: wp(4)}}>
          <Text
            numberOfLines={1}
            ellipsizeMode="tail"
            style={{
              color: props.DarkTheme ? Colours.white : Colours.black,
              fontSize: 20,
              fontFamily: Fonts.Montserrat.SemiBold,
            }}>
            {props.UserName}
          </Text>
          <Text
            numberOfLines={1}
            ellipsizeMode="tail"
            style={{
              color: props.DarkTheme ? Colours.white : Colours.App_black,
              fontSize: 15,
              fontFamily: Fonts.Montserrat.Light,
            }}>
            Email: {props.Email}
          </Text>
        </View>
      </View>
    )}
  </View>
</TouchableOpacity>);

But, it is not showing any image if it is failed to fetch image or image isn't available at provided uri.