Image tag is not rendering with 'react-native-web'

Question

I am new to react. I have a use case where I have to cache the image which is at the third party server.(want to avoid too many server calls to render an image every second) For this, I am using react-native-web

My application is a react web application. The code snippet is:

import { Image } from 'react-native-web';

class ImageComponent extends Component {

  componentWillMount() {
    const interval = setInterval(() => { this.timer(); }, 2000);
    this.setState({ interval });
    const urlOfImages = ['https://homepages.cae.wisc.edu/~ece533/images/mountain.png'];

    const preFetchTasks = [];

    urlOfImages.forEach((url) => {
        preFetchTasks.push(Image.prefetch(url));
    });
}

  render() {

     const images = ['https://homepages.cae.wisc.edu/~ece533/images/mountain.png'];
     const text = 'something';
     return (
       <div>
                <span>{ text }</span>
                <Image source={{ uri: images[0] }} alt="Banner" title="Banner" border="0" />
               <Image source={{ uri: images[0] }} alt="Banner" title="Banner" border="0" />
                <Image source={{ uri: images[0] }} alt="Banner" title="Banner" border="0" />
                <Image source={{ uri: images[0] }} alt="Banner" title="Banner" border="0" />
       </div>
      );
  }


}

Through the network tab, I could see that there is just one request being made to download the image from the server. This is expected by the Image tag but, none of the Image is being rendered on the browser.

Can anyone please direct to the problem that the Image tag isn't being rendered or is there a better way to cache the image from the server using react?