React-Native-Video handle URL changes

Question

In my application, I want to change the url of the react-native-player source when clicking on the next button.

My code is as follows.

// PLAYER

render() {
        let { paused } = this.state;
        let { volume } = this.props; 

        return (
            <View key={this.state.key}>
                <TouchableOpacity onPress={() => this.playOrPauseVideo()}>

                    <Video
                        ref={videoPlayer => this.videoPlayer = videoPlayer}
                        source={this.props.source}
                        // onEnd={() => this.onVideoEnd()}
                        // onLoad={() => this.onVideoLoad(this)}
                        // onProgress={() => this.onProgress(this)}
                        playInBackground={false}
                        paused={paused}
                        volume={Math.max(Math.min(1, volume), 0)}

                        style={styles.backgroundVideo}
                    />

                </TouchableOpacity>
            </View>
        );
    }

// Movement component

const currentMovement = props => { 

    renderVideo = () => {
        if (props.movementVideo && typeof props.movementVideo !== undefined) {
            return ( 
                <View style={styles.movementVideoWrapper}>
                    <HorizontalVideoPlayer source={{ uri: props.movementVideo }} /> 
                </View>
            );
        } else { 
            return <View/>
        }
    }

    return (
        <View>
            <View style={styles.headerTextWrapper}>
                <HeadingText 
                    style={styles.headerText}
                    fontSize={22} 
                    textAlign="center"
                >
                    {props.movementName}
                </HeadingText>
            </View> 

            {this.renderVideo()}

            <View style={styles.repsTextWrapper}>
                <HeadingText 
                    style={styles.repsText}
                    fontSize={26} 
                    textAlign="center"
                >
                    {props.reps} REPS
                </HeadingText>
            </View> 
        </View>
    );
}

// Screen

     let { firstCircuitMovement, workoutCompleted } = this.state;
            let { trainingProgress } = this.props;

            return (
                <View style={styles.container}>

                    <View style={styles.movementContainer}>
                        <CurrentMovement  
                            movementName={trainingProgress.currentMovementName}
                            movementVideo={trainingProgress.currentMovementVideo}
                            reps={trainingProgress.currentMovementReps}
                        />
                    </View>
      </View>
}

When we click on the next button, trainingProgress is updated with the new url. The new url is shown in the console, but it doesn't add to the player. Only the first video is played and the player stops. How can I set the next url to the video source? Even, I have set it already, it doesn't work.

How can I achieve this?