Image not loading in Typescript

[gitsjhare]

Here is my Code in Typescript, where I created Image array with various links (URL) but non of them is loading while the same code when we have in JS all the images are loaded. let me know what I am missing for TS.

import React, {useRef, useState, useEffect} from 'react';
import Carousel, {ParallaxImage} from 'react-native-snap-carousel';
import {
  View,
  Text,
  Dimensions,
  StyleSheet,
  TouchableOpacity,
  Platform,
} from 'react-native';



type ImageSource={
    title:string,
    subtitle: string,
    illustration: string
}

const Images : ImageSource[] =[ {
    title: 'Beautiful and dramatic Antelope Canyon',
    subtitle: 'Lorem ipsum dolor sit amet et nuncat mergitur',
    illustration: './assets/images/first.jpg',
  },
  {
    title: 'Earlier this morning, NYC',
    subtitle: 'Lorem ipsum dolor sit amet',
    illustration: '../assets/images/second.jpg',
  },
  {
    title: 'White Pocket Sunset',
    subtitle: 'Lorem ipsum dolor sit amet et nuncat ',
    illustration: '../assets/images/Third.jpg',
  },
  {
    title: 'Acrocorinth, Greece',
    subtitle: 'Lorem ipsum dolor sit amet et nuncat mergitur',
    illustration: '../assets/images/fourth.jpg',
  },
  {
    title: 'The lone tree, majestic landscape of New Zealand',
    subtitle: 'Lorem ipsum dolor sit amet',
    illustration: 'https://i.imgur.com/2nCt3Sbl.jpg',
  },];

const {width: screenWidth} = Dimensions.get('window');

export const MyCarouselTsx=()=>{
    const [entries, setEntries] = useState<ImageSource[]>([]);
    const carouselRef =useRef(null);

    const goForward = () => {
        carouselRef.current.snapToNext();
      };
      
    useEffect(() => {
        setEntries(Images);
      }, []);
      
      /* const renderItem = ({item, index}, parallaxProps) => {
        return (
          <Item style={styles.item} title={undefined}>
            <ParallaxImage
              source={{uri: item.illustration}}
              containerStyle={styles.imageContainer}
              style={styles.image}
              parallaxFactor={0.4}
              {...parallaxProps}
            />
            <Text style={styles.title} numberOfLines={2}>
              {item.title}
            </Text>
          </Item>
        );
      }; */

      const _renderItem=({item,index, parallaxProps} : any)=>{
        return (
        
<View style={styles.item}>
{ console.log(item.illustration) }
  <ParallaxImage
              source={{ uri : item.illustration}}
              containerStyle={styles.imageContainer}
              style={styles.image}
              parallaxFactor={0.4}
              {...parallaxProps}
            />
            <Text style={styles.title} numberOfLines={2}>
              {item.title}
            </Text>
</View>
        );
      }
      return (
        <View style={styles.container}>
          <TouchableOpacity onPress={goForward}>
            <Text>go to next slide</Text>
          </TouchableOpacity>
          <Carousel
           
            sliderWidth={screenWidth}
            sliderHeight={screenWidth}
            itemWidth={screenWidth - 60}
            data={entries}
            renderItem={_renderItem}
            hasParallaxImages={true}
          />
        </View>
      );
}

const styles = StyleSheet.create({
    title : {

    },
    container: {
      flex: 1,
    },
    item: {
      width: screenWidth - 60,
      height: screenWidth - 60,
    },
    imageContainer: {
      flex: 1,
      marginBottom: Platform.select({ios: 0, android: 1}), // Prevent a random Android rendering issue
      backgroundColor: 'white',
      borderRadius: 8,
      display: "flex",
      zIndex: 10
    },
    image: {
      ...StyleSheet.absoluteFillObject,
      resizeMode: 'cover',
    },
  });