How to get device display width with useRef()?

Question

React

It is necessary to display the UI component depending on the screen width. I think using the hook to get the width of the parent component, since it occupies the entire width of the screen, and show the desired element with conditional rendering. For example, if the width is greater than a certain value - show, if less - do not show. In the sample code, the menu should be displayed depending on what the screen width is. How to do?

import React, { useRef } from 'react';
import { TopHeader, HeaderWrapper } from './Header.style';
import Logo from '../Logo/Logo';
import Menu from '../Menu/Menu';

export default function Header() {
    const ref = useRef();

    return (
        <TopHeader>
            <HeaderWrapper>
                <Logo />
                {ref.current.clientWidth >= 992 && <Menu />}
                </HeaderWrapper>
        </TopHeader>
    )
}