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

前提・実現したいこと

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

該当のソースコード

React.js
1[親コンポーネント]
2import React, { useEffect, useState, useRef } from 'react';
3import { VideoPlayer } from './VideoPlayer'
4
5export const VideoContent = (props) => {
6
7    const [duration, setDuration] = useState(0);
8
9    const renderVideo = () => {
10        return props.video.map((v, index) => 
11            <VideoPlayer key={v.id} {...v} loadedMetadata={loadedMetadata} />
12        );
13    }
14
15    /**
16     *ビデオ読み込み後Durationセット
17     */
18    const loadedMetadata = (target) => {
19        console.log(target.duration);
20        setDuration(target.duration)
21    }
22
23    return(
24        <>
25            {renderVideo()}
26        </>
27    )
28}

[子コンポーネント（ビデオ表示部分）]
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>
    )
});