Как установить maxHeight с помощью React hook useRef

Question

Я хочу установить maxHeight для чьего-либо блока div с использованием React hook, использовать Ref. Я также использую функциональный компонент и useState, useEffect. Как я понимаю, моя ошибка заключается в использовании первого useEffect, потому что в процессе инициализации по умолчанию состояние useRef равно нулю, а мой maxHeight не установлен. Как правильно установить maxHeight с useRef?

Теперь мой код выглядит так:

import React, { useRef, useEffect, useState } from "react";

const MenuDropdown = () => {
  const dropDownRef = useRef(null);
  const titleRef = useRef(null);
  const [openStatus, changeOpenStatus] = useState(false);
  const [nativeHeight, setNativeHeight] = useState("");
  const [titleHeight, setTitleHeight] = useState("");


  useEffect(() => {
    setNativeHeight(dropDownRef.current.innerHeight);
    setTitleHeight(titleRef.current.innerHeight);
    console.log(nativeHeight, titleHeight);
  }, []);

  useEffect(() => {
    dropDownRef.current.innerHeight = openStatus ? nativeHeight : titleHeight;
  }, [openStatus]);

  return (
    <div className="menu-dropdown" ref={dropDownRef}>
      <div
        className="menu-dropdown-title"
        ref={titleRef}
        onClick={() => changeOpenStatus(!openStatus)}
      >
        <div>
          TITLE
      </div>
      </div>
    </div>
  )};