useRef 개체수가 많을때 적용하는 방법 예시

import React,{useRef, useState} from 'react';
import { NavigationList } from './NavigationList';


export const Navigation = () => {

const subRef = useRef(NavigationList.map(()=>React.createRef()));
console.log(subRef.current)
  return <div className="fixed top-0 left-0 w-48 border border-black h-full">
    <div className="h-12 border-b-[1px] border-black flex items-center justify-between px-4">
      <span>logo</span>
      <span className="inline-block border border-black cursor-pointer">줄이기</span>
      </div>
      <ul className="pl-4">
        {NavigationList.map((el,index)=>
          <li className="flex flex-col pt-4" key={index}
          onClick={(e)=>{
            const thisDiv = subRef.current[index].current
            if(thisDiv.className == "hidden"){
              thisDiv.className = 'block'
            }else{
              thisDiv.className = 'hidden'
            }
          }}
          >
            <span className="subtit1 inline-block hover:underline cursor-pointer"
            >{el.title}</span>
            <div 
            className="hidden"
            ref = {subRef.current[index]}
            >
              <span 
              className="subtit1 inline-block hover:underline cursor-pointer">{el.subtit1}</span>
              <span className="inline-block hover:underline cursor-pointer">{el.subtit2?el.subtit2:""}</span>
            </div>
           
          </li>
        )}
      </ul>
  </div>;
};