Passing Props to render

I am new to React, and I am trying to tackle a problem I am facing. It is to serve as an FAQs page with a hierarchy of tabs. So far it renders all of my tabs out, but I want to render tabs underneath based on if the last tab is active. Essentially it will render the data with the id's: 7,8,9 underneath the tab with the id 6 if it is selected. Do you know how I can achieve this hierarchy of tabs? I have shared the code, and also the picture of the tabs below.

Here is the data.jsx

export const events = [
    {
      id: 1,
      title: "Getting Started",
      description: "Giga uses a system we designed to help you thoroughly share your intelligence. We have created 11 topics to help you get your thoughts into an assessment. The 11 topics are: Context, Perspective, Importance, Wisdom, Insight, Knowledge, News, Current, Future, Risk and Opportunity ",
      category: "Getting Started"
    },

    {
        id: 2,
        title: "Creating Categories",
        description: "Details of Creating Categories",
        category: "Creating Category"
      },

      {
        id: 3,
        title: "Creating a Subject",
        description: "Details of Creating a Subject",
        category: "Creating a Subject"
      },

      {
        id: 4,
        title: "Creating an Assessment",
        description: "Details of Creating an Assessment",
        category: "Creating an Assessment"
      },

      {
        id: 5,
        title: "Filter Points of View",
        description: "Details of Filtering Points of View",
        category: "Filter Points of View"
      },

      {
        id: 6,
        title: "Assessment Topics",
        description: "Giga uses a system we designed to help you thoroughly share your intelligence. We have created 11 topics to help you get your thoughts into an assessment. The 11 topics are: Context, Perspective, Importance, Wisdom, Insight, Knowledge, News, Current, Future, Risk and Opportunity ",
        category: "Assessment Topics"
      },

      {
        id: 7,
        Secondtitle: "Future",
        description: "How can you describe your topic through the lens of the future?",
        category: "Future"
      },

      {
        id: 8,
        Secondtitle: "Past",
        description: "How can you describe your topic through the lens of the past",
        category: "Future"
      },

      {
        id: 9,
        Secondtitle: "Opportunity",
        description: "How can you describe your topic through the lens of an opportunity?",
        category: "Future"
      },




   
  ];
  

Here is the Faq.jsx

import React from "react";


import Tabs from "./Tabs";
import Panel from "./Panel";

import { events } from "./data";

import "./styles.css";


function Faq() {
  return (
    <Tabs>

      <Panel title="Getting Started">
        {events
          .filter(event => event.category === "Getting Started")
          .map(event => {
            return <div key={event.id}>
                <h2> 
                {event.title}
            </h2>
            {event.description}</div>;
          })}
      </Panel>

      <Panel title="Creating A Category">
        {events
          .filter(event => event.category === "Creating Category")
          .map(event => {
            return <div key={event.id}>
                <h2> 
                {event.title}
            </h2>
            {event.description}</div>;
          })}
      </Panel>

      <Panel title="Creating A Subject">
        {events
          .filter(event => event.category === "Creating a Subject")
          .map(event => {
            return <div key={event.id}>
                <h2> 
                {event.title}
            </h2>
            {event.description}</div>;
          })}
      </Panel>

      <Panel title="Creating An Assessment">
        {events
          .filter(event => event.category === "Creating an Assessment")
          .map(event => {
            return <div key={event.id}>
                <h2> 
                {event.title}
            </h2>
            {event.description}</div>;
          })}
      </Panel>

      <Panel title="Filter Points of View">
        {events
          .filter(event => event.category === "Filter Points of View")
          .map(event => {
            return <div key={event.id}>
                <h2> 
                {event.title}
            </h2>
            {event.description}</div>;
          })}
      </Panel>

      <Panel  
      
     
      title="Assessment Topics">
        {events
          .filter(event => event.category === "Assessment Topics")
          .map(event => {
            return <div key={event.id}>
                <h2> 
                {event.title}
            </h2>
            {event.description}
            
            
            </div>;
            
          })}
      
      </Panel>
    </Tabs>
  );
}

export default Faq;

Here is the Panel Component

import React from "react";

export default function Panel(props) {

    
  console.log("Panel props.children: ", props.children);
  
  return <div>{props.children}
  

  
  
  </div>;
}

Here is the Tabs Component

import React, { Component } from "react";

class Tabs extends Component {
  state = {
    selected: this.props.selected || 0
  };

  handleChange(index) {
    this.setState({ selected: index });
  }

  render() {
    return (
      <div className="all-styling">
        <ul>
          {this.props.children.map((elem, index) => {
            let style = index === this.state.selected ? "selected" : "";
            return (
              <li
                key={index}
                className={style}
                onClick={() => this.handleChange(index)}
              >
                {elem.props.title}
               
             
              </li>

              

              
              
            );
            
          }
          
          )}
           
        </ul>
        <div className="tab styling-tab">{this.props.children[this.state.selected]}</div>
        
      </div>
    );
  }
}

export default Tabs;

You can see the tabs rendered here, and I am looking to render sub-tabs under the Assessment Topics tab that is selected