Expected behavior I need to know the size of the component.

Actual behavior I can't get the size of the component (width and height)

Resources (screenshots, code snippets etc.)

enter link description here

import React, { useEffect, useContext, useRef } from 'react';

// MD BootStrap Component
import {
    MDBSideNav,
    MDBSideNavMenu,
    MDBSideNavItem,
    MDBSideNavLink,
    MDBIcon
} from 'mdb-react-ui-kit';

// Data Provider
import { DataContext } from '../data/DataContext';

const ComponentSidebar = () => {

const sidebarRef = useRef(null);

useEffect(() => {
    if (sidebarRef.current) {
        const handleSidebarResize = () => {
            if (sidebarRef.current) {
                const { width, height } = sidebarRef.current.getBoundingClientRect();
                setHeaderSize({ width, height });
            }
        };

        window.addEventListener("resize", handleSidebarResize);
        handleSidebarResize();

        return () => window.removeEventListener("resize", handleSidebarResize);
    }
}, []);

return (
        <>
            {hookSidebarEnable && (
                <MDBSideNav
                    ref={sidebarRef}
                    backdrop={false}
                    absolute
                >
                    <MDBSideNavMenu>
                        <MDBSideNavItem>
                            <MDBSideNavLink>
                                <MDBIcon far icon='smile' className='fa-fw me-3' />
                                Link 1
                            </MDBSideNavLink>
                        </MDBSideNavItem>
                        <MDBSideNavItem>
                            <MDBSideNavLink>
                                <MDBIcon fas icon='grin' className='fa-fw me-3' />
                                Link 2
                            </MDBSideNavLink>
                        </MDBSideNavItem>
                        <MDBSideNavItem>
                            <MDBSideNavLink>
                                <MDBIcon fas icon='grin' className='fa-fw me-3' />
                                Link 3
                            </MDBSideNavLink>
                        </MDBSideNavItem>
                    </MDBSideNavMenu>
                </MDBSideNav>
            )}
        </>
    );
};

export default React.memo(ComponentSidebar);