React 動画要素を入れ替えた時に再読み込みしない方法

Question

前提・実現したいこと

Reactで複数動画を再生できるサイトを作成しています。
メインの動画とサブの動画で1ページに複数動画を表示しているのですが、サブ動画をクリックした際に入れ替えたいと考えております。
入れ替え自体は実現できているのですが、State更新時に動画が再読み込みされ、1からの再生となってしまいます。
再読み込みせず要素のみを入れ替える方法をご教授いただきたいです。

該当のソースコード

export const Video = () => {

    const { videoRelationId } = useParams();

    // ローディングFLG（初回読み込み時）
    const [loading, setLoading] = useState(true);

    // video情報 [{}]
    const [video, setVideo] = useState(initialVideoState);
    // メインで表示しているVideo{}
    const [mainVideoId, setMainVideoId] = useState();

    const [player, setPlayer] = useState([]);
    const [mainVideo, setMainVideo] = useState(<video></video>);
    const [isPlay, setIsPlay] = useState(false);
    // 現在のフレーム
    const [currentFrame, setCurrentFrame] = useState(0);

    // Video情報取得
    useEffect(() => {
        getVideo(videoRelationId)
        .then(v => {
            setVideo(v);
            setMainVideoId(v[0].id);
            setLoading(false);
        })
        .catch(e => {
            throw new Error(e);
        })
    }, []);

    /**
     *Video描画
     * @return {JSX} VideoPlayer
     */
    const renderVideo = () => {
        // 2つ目以降はDivで囲うため、分割
        const [first, ...rest] = video;
        const pointerEvent = (isCreatingTag) ? 'none' : 'auto';
        const subVideoWrapStyle = {
            pointerEvents: pointerEvent
        }
        return (
            <>
                {first &&
                    <VideoPlayer
                        key={first.id}
                        {...first}
                        mainVideoFlg={true}
                        player={player}
                        setMainVideo={setMainVideo}
                        setIsPlay={setIsPlay}
                        createTagMouseDown={(isCreatingTag) ? createTagMouseDown : undefined}
                        createTagMouseMove={(isMouseDown) ? createTagMouseMove : undefined}
                        createTagMouseUp={(isMouseDown) ? createTagMouseUp : undefined} />
                }
                <div className={classes.subVideoWrap} style={subVideoWrapStyle}>
                    {rest.map(v => 
                        <VideoPlayer
                            key={v.id}
                            {...v}
                            mainVideoFlg={false}
                            player={player}
                            all_video={video}
                            setVideo={setVideo}
                            mainVideo={mainVideo}
                            setMainVideo={setMainVideo}
                            setMainVideoId= {setMainVideoId} />
                    )}
                </div>
            </>
        )
    };

    return(
        <>
            {
                loading ?
                <div key='loading'>
                    <p>loading...</p>
                </div>
                :
                <>
                    <div className={classes.videoPlayer}>
                        <div className={classes.videoContents}>
                            {/* video表示 */}
                            {renderVideo()}
                        </div>
                    </div>
                </>
            }
        </>
    )

}

//子コンポーネント[Player.js]

import React, { useRef, useEffect } from "react"

export const VideoPlayer = React.memo(props => {

    const ref = useRef();

    useEffect(() => {
        props.player.push(ref.current);
    }, []);

    const src = 'http://localhost:8000' + props.video;

    const style = (props.mainVideoFlg) ? { width: '100%' } : undefined;

    /**
     *ビデオ読み込み後Durationセット（MAINVIDEOのみ）
     *
     * @param {videoElement}
     */
    const loadedMetadata = (target) => {
        if(props.mainVideoFlg){
            props.setMainVideo(target);
        }
    }

    /**
     *動画終了時イベント
     */
    const onEnded = () => {
        if(props.mainVideoFlg){
            props.setIsPlay(false);   
        }
    }

    /**
     *サブ動画クリックイベント(Swiching機能)
     * @param {VideoElement}
     */
    const changeVideo = (targetEle) => {
        if(!props.mainVideoFlg){
            const newVideo = [...props.all_video];

            const target = newVideo.find(nv => String(nv.id) === targetEle.id);
            newVideo.forEach((nv, index) => {
                console.log(nv.id)
                if(nv.id === target.id){
                    newVideo[index] = newVideo.find(nv => String(nv.id) === props.mainVideo.id);
                }
            });
            newVideo[0] = target;
            props.setVideo(newVideo);
            props.setMainVideo(targetEle);
            props.setMainVideoId(target.id);
        }
    }

    return(
        <>
            <video muted
                id={props.id}
                style={style}
                ref={ref}
                onLoadedMetadata={() => loadedMetadata(ref.current)}
                onEnded={() => onEnded()}
                onClick={() => changeVideo(ref.current)} >
                <source src={src} />
            </video>
        </>
    )
});

###Constの情報

const [video, setVideo] = useState(initialVideoState);

[
    {
        id: 'id',
        video: "https://hogehoge.com"
    },
    {
        id: 'id',
        video: "https://mogemoge.com"
    }
]

・const [mainVideoId, setMainVideoId] = useState();
int 型でメインで表示しているVideoのIDを格納

・const [player, setPlayer] = useState([]);
Videoタグを配列形式で格納（playやposeなどvideoを扱うため）

[
    <video></video>, <video></video>
]

・const [mainVideo, setMainVideo] = useState(<video></video>);
メインのVideoタグを格納

Answer 1

renderVideo内でconst [first, ...rest] = video;とやっていたのが原因だったようです。
おそらく要素を丸々変更しないといけないため起こっていたのかと思います。

video.map(v =>
<VideoPlayer />
)
とすると際読み込みは走らなくなりました。

<div>で囲えなくなりましたが、デザインでどうにかしようと思います。