アコディオンメニューを作りたいです。

export const CategoryData2 = [
    {
      categoryJ: ["すべて"],
      categoryE: [""],
    },
    {
      categoryJ: ["ファッション"],
      categoryE: ["fashion"],
    },
    {
      categoryJ: ["ファッション", "トップス"],
      categoryE: ["fashion", "tops"],
    },
    {
        categoryJ: ["ファッション", "トップス", "Tシャツ・カットソー"],
        categoryE: ["fashion", "tops", "t-shirtcut-and-sew"],
    },
    {
        categoryJ: ["ファッション", "オールインワン"],
        categoryE: ["fashion", "all-in-one"],
      },
      {
        categoryJ: ["ファッション", "アンサンブル"],
        categoryE: ["fashion", "ensemble"],
      },
    ...

    {
        categoryJ: ["ベビー・キッズ・マタニティ"],
        categoryE: ["babykidsmaternity"],
      },
      {
        categoryJ: ["ベビー・キッズ・マタニティ", "ベビー・幼児"],
        categoryE: ["babykidsmaternity", "baby_infant"],
      },
      {
        categoryJ: ["ベビー・キッズ・マタニティ", "ベビー・幼児", "服・靴・小物"],
        categoryE: ["babykidsmaternity", "baby_infant", "clothes_shoes_accessory"],
      },
      
      ... 

      {
        categoryJ: ["スポーツ"],
        categoryE: ["sports"],
      },
      {
        categoryJ: ["スポーツ", "スポーツウェア・シューズ"],
        categoryE: ["sports", "sportswearshoes"],
      },
      {
        categoryJ: ["スポーツ", "スポーツウェア・シューズ", "スポーツウェア"],
        categoryE: ["sports", "sportswearshoes", "sportswear"],
      },
      ...

]

<ul>
    <label htmlFor="menu1">すべて</label>
    <input type="checkbox" id="menu1" class="toggle"/>
    
    <label htmlFor="menu1">ファッション</label>
    <input type="checkbox" id="menu1" class="toggle"/>
      <ul>
        <li>トップス</li>
        <li>オールインワン</li>
        <li>アンサンブル</li>
      </ul>
    
    <label htmlFor="menu1">ベビー・キッズ・マタニティ</label>
    <input type="checkbox" id="menu1" class="toggle"/>
       <ul>
          <li>ベビー・幼児</li>
       </ul>

    <label htmlFor="menu1">すべて</label>
    <input type="checkbox" id="menu1" class="toggle"/>
</ul>

import styles from "../styles/Home.module.css";
import { SidebarData } from "./sidebardata";
import { CategoryData2 } from "./categorydata2";
import { useState, useEffect } from "react";

const Sidebar = ({ category, setCategory, categoryItems }) => {
  const [sideCategory, setSideCategory] = useState([]);

  const handle = (value) => {
    // setCategory(value.categoryE);
    const categoryE = value.categoryE;
    categoryItems(categoryE);
  };
  
  const handle2 = (topCategory) => {
    let categoryObj = CategoryData2.filter((element) => {
      return (
        element.categoryJ[0] == topCategory && element.categoryJ.length == 2
      );
    });
    if (typeof categoryObj == "undefined") {
      setSideCategory("");
      return "";
    } else {
      setSideCategory(categoryObj);
      // return categoryObj;
    }
  };

  let CategoryData3 = CategoryData2.filter((element) => {
    return element.categoryE.length == 1;
  });

  return (
    <>
      <div className={styles.sidebar}>
        <div className={styles.sidebarmidashi}>カテゴリー</div>
        <ul className={styles.sidebarlist}>
         {CategoryData3.map((value, key) => {
           let categoryArr = category.split(",");
              return (
              <li>
                <label
                  htmlFor={key}
                  key={key}
                  id={categoryArr[0] == value.categoryE[0] ? "active" : ""}
                  className={styles.sidebarrow}
                  onClick={(e) => handle(value)}
                  >
                <div id="categoryJ">{value.categoryJ}</div>
                </label>

                <input type="checkbox" id={key} class="toggle" />


                //ここで、子カテゴリの抽出を行いたいが、よくわからないです。
                {() => handle2(value.categoryJ)}

                <ul className={styles.sidebarlist}>
                 
                  {sideCategory.map((value, key) => {
                    
                    return (
                      <li
                        key={key}
                        id={category == value.categoryE ? "active" : ""}
                        className={styles.sidebarrow}
                        onClick={(e) => handle(value)}
                       
                      >
                        <div id="categoryJ">{value.categoryJ[1]}</div>
                      
                      </li>
                    );
                  })}
                </ul>
              </li>
            );
          })}
        </ul>
      </div>
    </>
  );
};

export default Sidebar;