Next.js 13 app directory static site generation and show without props drilling

Question

**I face a problem when I am making an API request with Next.js SSG and SSR. **
I am getting the API data very well. But I want to show the data inside a nested component. But I don't want to do props drilling...

import CompA from "./CompA";
const apicall = async () => {
    const res = await fetch("https://fakestoreapi.com/products", {
        next:{
            revalidate: 10 // 10 second 
        }
    });
    return await res.json()
}
const page = async () => {
    const data = await apicall()
  return (
    <>
    <CompA product={data} />
    </>
  )
}
export default page

Here this is my first product page and I am receiving some data from API. I want to show the data in a nested component called <CompB/> But On my product page initially I am calling <CompA/> and I am passing the data in into <CompA/> which I was given from API. And this is component <CompA/>

'use client'
import React from 'react'
import { Product } from './product.types'
import CompB from './CompB'
const CompA = ({product}:{product:Product[]}) => {
    
  return (
    <>
<CompB product={product} />
    </>
  )
}
export default CompA

And <CompA/> doesn't want to show the data instead pass the data into <ComB/>

'use client'
import React from 'react'
import Image from 'next/image';
import { Product } from './product.types';
import { FaStar } from "react-icons/fa";
const Compb = ({ product }: { product: Product[] }) => {
  return (
    <>
      // show the data here
       
    </>
  );
};

export default Compb

So here the problem is unnecessary props drilling. is there any way to avoid the props drilling and show the data directly, in <ComB/> Actually I want to use RTK in my project or any other state management library.