ImageBackground not displaying image when fetched from API

When I am fetching image source from API, Image is not displayed in ImageBackground even though source exists but remaining data is displayed such as listing title and other details.

import React, {useState, useEffect}from 'react';
import {
FlatList,
ImageBackground,
Image,
StyleSheet,
View,
TouchableOpacity,
} from 'react-native';
import { Paragraph } from './paragraph';
import { Heading } from './heading';
import { baseStyle, images, theme, routes } from '../config';
import { useNavigation } from '@react-navigation/native';
export const Carousal = ({ data, style, onPress }) => {
const navigation = useNavigation();
// const [imageUri, setImageUri] = useState(null);
// useEffect(() => {
//   fetchImage();
// }, []);
// const fetchImage = async () => {
//   try {
//     const response = await fetch (`$item.listing_image`); // Replace with your image URI
//     const blob = await response.blob();
//     const uri = URL.createObjectURL(blob);
//     setImageUri(uri);
//   } catch (error) {
//     console.error(error);
//   }
// };
return (
// data.length > 0
// ?
<FlatList
horizontal
style={style}
data={data}
showsHorizontalScrollIndicator={false}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => navigation.navigate(routes.VENUE_PROFILE, {item:item})}>
<ImageBackground
source={{uri: item.listing_image}}
style={styles.flatList}
resizeMode="contain">
<Heading style={styles.heading}>{item.listing_title}</Heading>
<View
style={{
...styles.flex,
marginVertical: baseStyle.marginVertical(5),
}}>
<Paragraph style={styles.para}>{item.listing_area}</Paragraph>
<View style={styles.flex}>
<Image
style={{...styles.img, tintColor: theme.colors.black}}
source={images.starIcon}
resizeMode="contain"
/>
<Paragraph style={styles.para}>{item.listing_rating}</Paragraph>
</View>
</View>
<View style={styles.flex}>
<View style={styles.flex}>
<Image
style={{...styles.img, tintColor: theme.colors.black}}
source={images.pinIcon}
resizeMode="contain"
/>
<Paragraph style={styles.para}>{item.listing_category}</Paragraph>
</View>
<View style={styles.flex}>
<Image
style={{...styles.img,tintColor: theme.colors.black}}
source={images.clockIcon}
resizeMode="contain"
/>
<Paragraph style={styles.para}>{item.listing_time}</Paragraph>
</View>
</View>
</ImageBackground>
</TouchableOpacity>
)}
/>
// :
// <Text style={styles.flex}> No Record Found </Text>
);
};
const styles = StyleSheet.create({
flatList: {
paddingTop: baseStyle.paddingTop(84),
paddingLeft: baseStyle.paddingLeft(15),
paddingBottom: baseStyle.paddingBottom(15),
paddingRight: baseStyle.paddingRight(44),
marginVertical: baseStyle.marginVertical(10),
marginRight: baseStyle.marginRight(10),
width: baseStyle.width(315),
height:200,
},
});

displayed only the required styling in above code.
API response:

{"id": 20, "listing_area": "Korangi", "listing_category": "Food", "listing_description": "Good in Taste
", "listing_feedback": 5, "listing_image": "https://www.pexels.com/photo/white-walls-of-buildings-in-town-14200161/", "listing_location": "https://goo.gl/maps/zRVGiY7sBJxseJJCA?coh=178571&entry=tt", "listing_rating": 4, "listing_time": 10, "listing_title": "Jahanzaib Haleem Korangi Branch"}

code is all good but your repones from api
"listing_image": "https://www.pexels.com/photo/white-walls-of-buildings-in-town-14200161/",
is not an image URL it site page URL I use this "https://images.pexels.com/photos/14200161/pexels-photo-14200161.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
you just need a proper image URI
it might work if didn't use flex in style and check style.