React Native: Issue in declaring the image source as a function?

Here is what I am trying to do with React Native:

1. Get the image URL data from the database.
2. Check if the image exists in the storage.
3. If the image exists, render it. If not, render a placeholder image.

Basically, I declared a function to do steps 2&3 and put that as a source in the Image component. However, the Image component won't render any image, even if the target image exists in the storage with the URL.

What might be going on here? Here is the code that I am using. Don't see why this code won't work...Maybe a syntax error? What might be a fix/better way to do this?

//The function to check if the image actually exists and return placeholder if not
const checkImageURL = (url) => {
    const placeholder_url='url_of_placeholder_image';
    fetch(url)
       .then(res => {
       if(res.status == 404){
         return placeholder_url;
       }
       else{
         return url;
      }
    })
   .catch(err=>{return placeholder_url})
}

//The way I declared the source for the image
<Image source={uri:checkImageURL(url)} style={style.mainImage}/>