React 親コンポーネントで子コンポーネントのvideo.duration取得方法

Question

前提・実現したいこと

Reactで動画を複数再生できるページを作成しております。
親コンポーネントでdurationをstateにセットするloadedMetadataを用意し、子コンポーネントで発火した際にduration取得方法がわかりません。
どのようにすれば取得できますでしょうか？

該当のソースコード

[親コンポーネント]
import React, { useEffect, useState, useRef } from 'react';
import { VideoPlayer } from './VideoPlayer'

export const VideoContent = (props) => {

    const [duration, setDuration] = useState(0);

    const renderVideo = () => {
        return props.video.map((v, index) => 
            <VideoPlayer key={v.id} {...v} loadedMetadata={loadedMetadata} />
        );
    }

    /**
     *ビデオ読み込み後Durationセット
     */
    const loadedMetadata = (target) => {
        console.log(target.duration);
        setDuration(target.duration)
    }

    return(
        <>
            {renderVideo()}
        </>
    )
}

[子コンポーネント（ビデオ表示部分）]
import React, { useRef, useEffect } from "react"

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

    const ref = useRef();

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

    return(
        <div>
            <video ref={ref} onLoadedMetadata={props.loadedMetadata(this)}>
                <source src={src} />
            </video>
        </div>
    )
});

試したこと

子コンポーネント
onLoadedMetadata={props.loadedMetadata(this)}
↓
onLoadedMetadata={(e) => props.loadedMetadata(e)}
に変更

子コンポーネント
onLoadedMetadata={props.loadedMetadata(this)}
↓
onLoadedMetadata={props.loadedMetadata(ref)}
に変更
target.currentがundefined

Answer 1

初歩的なミスでした
子コンポーネント
onLoadedMetadata={() => props.loadedMetadata(ref)}

親コンポーネント
const loadedMetadata = (target) => {
setDuration(target.current.duration);
}
で解決しました