Passing data from child component(api call) to parent page in Next JS - reactjs

Question

I have created a project in Next js and rendering the component using getServerSideProps.
It has an index page like this with two component, side and Hero
export default function HeroPage({data, data1, data2, data3}) {
return (
<div className="h-full flex flex-row">
<Side years={data2} chapters={data3} />
<MyMap districts = {data} mis={data1}/>
</div>
);
}
//using Serversideprops and fetching the data from api
// and passing the data to respective components
export async function getServerSideProps() {
const response = await fetch("https://dev.ksrsac.in/testjson/district.json");
const data = await response.json();
const response1 = await fetch("http://localhost:3000/api/mis");
const data1 = await response1.json();
const response2 = await fetch("http://localhost:3000/api/year");
const data2= await response2.json();
const response3 = await fetch("http://localhost:3000/api/sidebar");
const data3 = await response3.json();
return {
props: { data:data, data1:data1, data2:data2, data3:data3 }
};
}
and it is rendering properly.
The side bar component code is as below
export default function Side({ years, chapters }) {
const [yr, setYr] = useState(years);
const [ch, setCh] = useState(chapters);
const [showTab, setShowTab] = useState(false);
function clickHandler(){
setShowTab(true);
}
return (
<div className="w-1/5 bg-blue-200">
{/* year component */}
<div className="pt-2 px-4 m-4 bg-blue-900 rounded-lg">
<label className="text-white"> Year : </label>
<select className="px-10 text-white bg-blue-900">
{yr.map((y) => {
return <option key={y.id}>{y.year}</option>;
})}
</select>
</div>
{/* chapter component */}
<ul className="p-2 px-4">
{ch.map((c) => {
return (
<li key={c.id} onClick={clickHandler} className="bg-blue-900 text-white border border-white-800 rounded-lg p-2 hover:bg-sky-700 hover:text-yellow-300">
{c.id}. {c.cName}
</li>
);
})}
</ul>
{showTab && <Tab handler = {setShowTab}/>}
</div>
);
}
Side bar having a child component called Tab, if user clicks on chapter-> I am showing the Tab
export default function Tab({handler}) {
return (
<div className="absolute z-40 right-4 top-28 w-62 border border-blue-500">
<div className="absolute top-0 right-0">
<button onClick={handleClick=>handler(false)}>X</button>
</div>
<main className="mt-3 underline underline-offset-1">
it contains min/max/avg
</main>
<div className="overflow-y-scroll">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>
);
}
In the Tab component, I have created a closing button. If user clicks on this, I am closing the tab component by changing the parent setShowTab status to false.
The challenge is
As the user clicks on ay list item - One, Two, Three
I have to call an api, which return array of object like below
One=[{id:1, femalePopCount:200}, {id:2, femalePopCount:300}, {id:3, femalePopCount:400}]
And I have to pass this data to MyMap component, which I am rendering in the index page.
How to do this ?
MyMap component code is as below - in map component I am joining two array i.e.,
district =[{id:1, name:’bidar’},{id:2, name:’dharwad’},{id:3, name:’yadgir’}]
mis =[{id:1, malePopCount:200}, {id:2, malePopCount:300}, {id:3, malePopCount:400}]
which i have received from the getServerSideProps
In MyMap component, as user click different list item from Tab component, I have to change the mis data and render the MyMap component.