Hello everyone I hope you are well I am a beginner in react js and I would like to display a dynamic dropdown list in react js for this I use my child component History and I pass him a pros "data" however I have a display bu when I add an element in my table "data"

I would like to know if someone has already had this problem and if he could help me

Component child History

import React, { useEffect, useState } from "react";
import imgFolder from "../assets/tree-viewer-img/folder.svg"

function History({data}) {
  
  useEffect(() => {
    var toggler = document.getElementsByClassName("caret");
    var i;

    for (i = 0; i < toggler.length; i++) {
      toggler[i].addEventListener("click", function(e) {
        console.log("🚀 ~ file: History.js ~ line 11 ~ e", e);
        this.parentElement.querySelector(".nested").classList.toggle("active");
        this.classList.toggle("caret-down");
      });
    }
  }, [data]);

  return (
    <div className="container_history">
      <ul id="myUL">
        {data.map((item, index) => {
          return (
            <li key={index}>
              <span className="caret">
                <img src={imgFolder} alt="" />
                {item.name}
              </span>

              <ul className="nested">
                {item.children.map((list, indexOf) => {
                  return <li key={indexOf}>{list.name}</li>;
                })}
              </ul>
            </li>
          );
        })}
      </ul>
    </div>
  );
}
export default History;

in my props "data"

[
    {
      name: "Model 3D",
      children: [
        { name: "Geometry", children: [] },
        { name: "Texture", children: [] },
      ],
    },
  ]

problem view