I'm using react-native-vision-camera to capture a picture and view it inside an <Image> component. The expected behavior is updating the picture after capturing a new one. Since the source property of the <Image> component points to a new picture (with the same name Ok, but still, it's a new picture).

But this never happens. Even when I reload the app, <Image> still shows the old picture. I have to rename the new picture.

I thought that this happens because maybe the state of the source property updates before react-native-vision-camera saves the new picture so the <Image> component renders the old picture but I'm using async-await so as far as I know, this shouldn't happen.

The code I wrote for the capturing function is

const [photoPath, setPhotoPath] = useState("");

const capture = async () => {
        const photo = await camera.current.takePhoto();
        const path = RNFS.ExternalDirectoryPath + '/photo-X.jpg';
        //when i update X (in the saved image name) with a new number,
        //<Image> views the correct image.

        await RNFS.moveFile(photo.path, path)
        setPhotoPath("file://" + path)
    }

the code to view the image

{
    photoPath.length > 0 ?
        < Image
          source={{ uri: photoPath }}
          style={[styles.camera, { backgroundColor: 'black' }]}
        />
    :
        null
}

I have a capture <Button> that calls the capture() function that updates the photoPath state that should update the source of the <Image> component and this process should view the new picture. But this never happens even after reloading the app. I have to pick a new name for the new picture to get it to be viewed. Why I'm getting this behavior instead of the one I'm expecting? What's wrong with my code, or my understanding, and what is the correct solution?