How to Specifically Parse JSON in REACT when creating Tabs?

Please see the Code Below. One is the Tabs component, the other is the staff page, and the last is the JSON file. What I did was make tabs in REACT based on the JSON file so that I could make a staff page organized by position. The problem comes when the staff list is made. What happens is that multiple positions are listed over and over again. I.E. staff is listed under position for three people but the staff link on the staff page should only appear once with all instances/people who have staff as their position underneath.

In general, the question would be how do I organize based on specific JSON subcategories?

Please let me know if you need more information!

<!-- language: lang-react -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
    import React, { useEffect } from "react";
    import { useState } from "react";
    import "./Tab.css";

    const Tab = ({ children, active = 0 }) => {
      const [activeTab, setActiveTab] = useState(active);
      const [tabsData, setTabsData] = useState([]);

      useEffect(() => {
        let data = [];

        React.Children.forEach(children, (element) => {
          if (!React.isValidElement(element)) return;

          const {
            props: { tab, children },
          } = element;
          data.push({ tab, children });
        });

        setTabsData(data);
      }, [children]);

      return (
        <div className="w-100">
          <ul className="nav nav-tabs">
            {tabsData.map(({ tab }, idx) => (
              <li className="nav-item">
                <a
                  className={`nav-link ${idx === activeTab ? "active" : ""}`}
                  href="#"
                  onClick={() => setActiveTab(idx)}
                >
                  {tab}
                </a>
              </li>
            ))}
          </ul>
          <div className="tab-content p-3">
            {tabsData[activeTab] && tabsData[activeTab].children}
          </div>
        </div>
      );
    };

    const TabPane = ({ children }) => {
      return children;
    };

    Tab.TabPane = TabPane;

    export default Tab;






<!-- language: lang-react -->


import "./styles/staff.css";
import PostData from "./data/posts.json";
import Tab from "./Tabs/Tab";
import "./Tabs/Tab.css";

// import ScriptTag from 'react-script-tag';

const Staff = () => {
  // <ScriptTag type="text/javascript" src="Client\src\owl.js" />
  console.log(PostData);
  return (
    <div className="bg">
      <div id="testimonial-slider" className="owl-carousel">
        <div className="wrapper">
          <h1> Staff </h1>
          <div className="team">
            <Tab>
              {PostData.map((tab, idx) => (
                <Tab.TabPane key={`Tab-${idx}`} tab={tab.Title}>
                  <h3>{tab.Name}</h3>
                  <p>{tab.Title}</p>
                  <p>{tab.Location}</p>
                  <p>{tab.Description}</p>
                  {/* {PostData.map((PostData) => {
                    return (
                      <div className="team_member">
                        <div className="team_img">
                          <img
                            src="https://i.imgur.com/2pGPLrl.png"
                            alt="Team_image"
                          ></img>
                        </div>
                        <div key={PostData.id}>
                          <h3>{PostData.Name}</h3>
                          <p>{PostData.Title}</p>
                          <p>{PostData.Location}</p>
                          <p>{PostData.Description}</p>
                        </div> 
                    </div>
                    ); 
                  })} */}
                </Tab.TabPane>
              ))}
            </Tab>
            {/* _____________________________________________ */}
            {/* _____________________________________________ */}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Staff;



```
[
    {
        "id": 1,
        "Name": "Bob",
        "Title": "President",
        "Location": "California",
        "Description": "asdfghj "
    },
    {
        "id": 2,
        "Name": "James",
        "Title": "President",
        "Location": "California",
        "Description": "asdfghj"
    },
    {
        "id": 3,
        "Name": "Charles",
        "Title": "Director",
        "Location": "California",
        "Description": "J asdfghj"
    },
    {
        "id": 4,
        "Name": "Janet",
        "Title": "Outreach",
        "Location": "Colorado",
        "Description": "asdfghj"
    },
    {
        "id": 5,
        "Name": "Jacklyn",
        "Title": "Media",
        "Location": "New Jersey",
        "Description": "asdfghj"
    },
    {
        "id": 6,
        "Name": "Mandy",
        "Title": "Layout",
        "Location": "California",
        "Description": "asdfghj"
    },
    {
        "id": 7,
        "Name": "Jimmy",
        "Title": "Artist",
        "Location": "California",
        "Description": "asdfghj"
    },
    {
        "id": 8,
        "Name": "Luigi",
        "Title": "Artist",
        "Location": "California",
        "Description": "asdfghj"
    },
    {
        "id": 9,
        "Name": "Mario",
        "Title": "Editor",
        "Location": "California",
        "Description": "asdfghj"
    },
    {
        "id": 10,
        "Name": "Sam",
        "Title": "Staff",
        "Location": "California",
        "Description": "asdfghj"
    },
    {
        "id": 11,
        "Name": "Sharon",
        "Title": "Staff",
        "Location": "California",
        "Description": "asdfghj"
    },
    {
        "id": 12,
        "Name": "Gary",
        "Title": "Staff",
        "Location": "Philadelphia",
        "Description": "asdfghj"
    }
]