How to control parent tabs & tab content from a child component links

Question

https://codesandbox.io/s/simple-line-chart-forked-h39zlx?file=/src/App.tsx I wanted to load each main tab components from the loaded landing component above link. on click of the 3 tabs under overview, the overview component should replace with clicked tab's component and the main tab should active. please see codesandbox full code & help

const [active, setActive] = useState("tab1")
const isActive = (key) => (active === key ? 'active' : '');

 <a to="" className={`btn btn-link ${active === "tab1"? "active":""}`}    onClick={() => setActive("tab1")} >Overview</a> 
 <a to="" className={`btn btn-link ${active === "tab2"? "active":""}`}    onClick={() => setActive("tab2")} > Align & Ratio</a> 
 <a to="" className={`btn btn-link ${active === "tab3"? "active":""}`}    onClick={() => setActive("tab3")} > Avatar       </a>             
 <a to="" className={`btn btn-link ${active === "tab4"? "active":""}`}    onClick={() => setActive("tab4")} > Tags       </a> 

{active === "tab1" && <div><OverviewMain title="Overview" /></div>}
{active === "tab2" && <div><AlignandRatio title="AlignandRatio" /></div>}
{active === "tab3" && <div><Avatar title="Avatar"/></div>}
{active === "tab4" && <div><Tags title="Tags"/></div>}

How to load That links under overview by map ? if I have const Tabs=[ { tabname:"tab2", }, { tabname:"tab3", }, { tabname:"tab4", } ]

Answer 1

 // Component Overview
  function Overview() {
    return (
      <div>
        <hr />
        <h1>Overview</h1>
        <a onClick={() => setActive("tab2")} className="tab">
          Align & Ratio{" "}
        </a>
        <a onClick={() => setActive("tab3")} className="tab">
          Avatar{" "}
        </a>
        <a onClick={() => setActive("tab4")} className="tab">
          Tags{" "}
        </a>
      </div>
    );
  }

Try this