How to display thumbnail before video uploads using reactr-native-createthumbnail and react-native-video-player

I have been using react-native video player in order to show video, until video loads I want to display thumbnail so I am using react-native-create-thumbnail to generate thumbnail from video

createThumbnail({
              url: video.path,
              timeStamp: 10000,
            })
              .then(response => {
                  console.log('thumbnail',response)
                  thumbnailUrl=response.path;
              }
              )
              .catch(err => console.log('thumbnail err',err));

here I get the following object

thumbnail {"height": 300, "path": "file:///data/user/0/com.sheolife/cache/thumbnails/thumb-4b75eaad-2afe-4c3d-994d-3f6206ce5b75.jpeg", "width": 300}

when I add the above thumbnailUrl inside my Videoplayer thumbnail prop, it is still showing black

I try added as below

<VideoPlayer
            ref={videoplayerref}
            video={{
              uri: video
            }}
            paused={paused}
            videoWidth={Dimensions.get("window").width}
            videoHeight={400}
            thumbnail={{uri:thumbnailUrl}}
            resizeMode="contain"
            pauseOnPress
            // hideControlsOnStart
            onStart={(state) => onStart(state)}
            onPlayPress={(state) => onPlayPress(state)}
            hideControlsOnStart={true}
          /> 

now here the thumbnailUrl is local file so I thought to write it as follows:

thumbnail={require(`${thumbnailUrl}`)}

but this too is throwing error, could anyone please help me out here, how do I access my thumbnailpath inside videoplayer? Any leads would be great.