React Material UI - Как получить ширину / высоту родительского компонента?

Question

Я использую React Material-UI с реагирующим маршрутизатором, и я хотел бы получить высоту / ширину родительского компонента (чтобы я мог установить идеальный размер).

Изображение лучше, чем 1000 слов:

Мой компонент:

import React from 'react'
import ReactPlayer from 'react-player'
import { useParams } from 'react-router-dom'

export default function Player(props) {
    const { playlistId } = useParams();
    const YOUTUBE_BASE_PLAYLIST_LINK = "https://www.youtube.com/playlist?list=";

    // how to get them ?
    const heigth = "320px";
    const width = "640px";

    return (
        <ReactPlayer
            controls={true}
            url={YOUTUBE_BASE_PLAYLIST_LINK + playlistId}
            playing={true}
            width={width}
            height={heigth}
        />
    )
}

Мой маршрутизатор:

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import { Provider } from 'react-redux'

import Home from "./components/Home/Home";
import Player from "./components/PlaylistPlayer/Player";
import {Container} from "@material-ui/core";
import basicStyle from "./components/Home/styles"

function Root({ store }) {

    const classes = basicStyle();

    return (
        <Provider store={store}>
            <Router>
                <Route
                    path="/"
                    render={(props) => <Home {...props} classes={classes} />}
                />
                <main className={classes.content}>
                    <div className={classes.toolbar} />
                    <Container>
                        <Route path="/playlists/:playlistId" component={Player} />
                    </Container>
                </main>
            </Router>
        </Provider>
    )
}

export default Root

Что такоелучший / чистый способ достижения моей цели?

Спасибо за вашу помощь