react-player uploading and playing new video - reactjs

Question

I am uploading video through express server to react's public folder and using hook for the name of the file. If its a large video file, after uploading react player starts playing it correctly. But if the file is small, player doesn't run it and I have to reload after some time then it works.
Also if a small file is uploaded after a large file it returns an error range not satisfiable.
React-player:
<ReactPlayer
url={
filePath
}
class="react-player" width="100%"
ref={ref}
controls={true}
onDuration={setDuration}
/>
Axios connection:
useEffect(() => {
const request = () => {
if (serverPath === 'http://localhost:5000/upload') {
const datatoSend = new FormData()
datatoSend.append('file', myFile)
const fetchdata = async () => await axios.post(serverPath, datatoSend, {
onUploadProgress: ProgressEvent => {
setLoaded(ProgressEvent.loaded / ProgressEvent.total * 100)
}
})
const result = fetchdata()
result.then(res => {
if (res.data ==='Server Connected') {
setFilePath('CurrentMedia.mp4')
}
})
}
}
}, [serverPath])
Express Code:
app.post("/upload", async (req, res) => {
console.log('/ route called')
const file = req.files.file
await file.mv(`${__dirname}/client/public/CurrentMedia.mp4`, (err) => {
if (err) {
console.error(err);
return res.status(500).send(err);
}
res.send('Server Connected');
});
})

Answer 1

I was able to solve it by saving the file by a different name every time new file is uploaded. The problem was with react-player trying to run a new video file with the same name. Since the name of the file was same it ran the one it had cached before.
just doing this in express and updating hooks in react respectively fixed it
app.post("/upload", async (req, res) => {
console.log('/ route called')
const file = req.files.file
const name = file.name
file.mv(`${__dirname}/public/${name}`, (err) => {
if (err) {
console.error(err);
return res.status(500).send(err);
}
res.send('Server Connected');
console.log('Server Connected')
});
})