Reactで複数人のビデオ映像を受け取って表示したい

Question

勉強のためにReactでSkyway.jsを使用し、三人以上の複数人ビデオ通話を実装しています

そこで、他のユーザーが参加したらDOMにvideoタグを追加し、ref属性に取得したMediaStreamを付与したいです
具体的にはzoomやmeetのように、他のユーザーが参加したらそのユーザーのビデオ映像を写し、
退出したらそのユーザーのビデオ映像を削除するという挙動を実現したいです。

自分の今の考えでは、
参加のユーザーのMediaStreamを受け取る→useRefでRefを作成
→Refをオブジェクトに格納してJSX内にループでvideoタグを表示

という流れであれば実現できるのではないかと思い、調べながら以下のように書きました。

const App =() => {
　　　const remoteVideo = useRef(null)
　　　const [remoteVideoData, setRemoteVideoData] = useState([])

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

     #これが他のユーザーのビデオデータを受信をで発火するメソッドです
　　　room.on('stream',　stream**←これにMediaStreamが入っています** => {
　　　　　remoteVideo.current.srcObject = stream
　　　　　setRemoteVideoData(remoteVideoData => [...remoteVideoData, remoteVideo])
     })

    return(
〜〜〜〜〜〜〜〜〜〜
        <div className="remoteVideo">
            { Object.keys(remoteVideoData).map((remoteStream) => {
                return(
                    <div>
                        <video autoPlay muted playsInline ref={ remoteStream }></video>
                    </div>
                )
             })}
        </div>
〜〜〜〜〜〜〜〜〜〜
    )
}

しかし、期待するような動作はせず、

Error: Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here: https://fb.me/react-strict-mode-string-ref

と関数コンポーネントではuseRefを使った方がよい旨のエラーがでてしまいます。

これはRefをオブジェクトに格納しているからおきているエラーなのでしょうか、
それとも根本的に何か間違っているのでしょうか。
つたない質問文で意図が把握できない部分がありましたらご指摘いただければ修正いたします。

正直自分で調べていてもかなり詰まってしまっていて、ご指摘と実現方法のアドバイスをいただきたいです。
よろしくお願いいたします。

Answer 1

room.on('stream', stream => {
   setRemoteVideoData(oldRemoteVideoData => [...oldRemoteVideoData, stream])
})

でMediaStreamをstateに格納して、

remoteVideoData.map((videoData, index) => {
     return (
        <RemoteVideo key={ index } videoData={ videoData }/>
     )
})

格納したMediaStreamをコンポーネントに渡し、
useEffectでMediaStreamをRefに格納して参照するようにすると、意図した動作が実現できました。

const RemoteVideo = (props) => {
    const videoRef = useRef()

    useEffect(() => {
        videoRef.current.srcObject = props.videoData
    })
    return(
        <div className="remoteVideo">
                <video autoPlay playsInline muted ref={ videoRef }></video>
        </div>
    )
}