How do I get height of an opening/closing component/accordion in ReactJS

I have an accordion which opens a submenu. Now I have multiple categories of Submenu which have varying heights.

How do I define the height of its parent div?

Example:

 <div
        className="mobOptions"
        style={{
          transform: openOption ? "translateY(-300px)" : "translateY(0)",
          
        }}
      >
      // Submenu 1 (Different Javascript file having a functional component)
      // Submenu 2 (Different Javascript file having a functional component)

etc


 </div>

So how do I find the height of these submenus and set my parent height?

Using document.querySelector and useRef give constant heights, even after writing them in useEffect and having height as the dependency.