React passing data from generated pages to other components - reactjs

Question

I am creating pages dynamically per product id and I am able to access the data via pageContext within each page. The product pages are generating correctly with the data expected, however I am struggling with the logic of passing the data to other components eg the shopping cart. How do I pass the data across?
gatsby-node.js
const products = require('./src/helpers/product.json');
products.forEach(product => {
createPage({
path: `/product/${product.productCode}/`,
component : require.resolve('./src/templates/product.js'),
context : {
title: product.title,
description: product.description,
image: product.image,
price: product.price,
productCode: product.productCode,
}
})
})
The Products page has various components such as QuickView of the item, MiniCartView, add to Cart- all of which I would like to share the product data across the components.
Product.js (reduced code snippet)
const Product = ({ pageContext }) => {
const ctxAddItemNotification = useContext(AddItemNotificationContext);
const showNotification = ctxAddItemNotification.showNotification;
return (
<Layout>
<div className={styles.root}>
<Container size={'large'} spacing={'min'}>
<Breadcrumbs
crumbs={[
{ link: '/', label: 'Home' },
{ label: `${pageContext.name}` },
]}
/>
<div className={styles.content}>
<div className={styles.gallery}>
<Gallery images={pageContext.gallery} />
</div>
<div className={styles.details}>
<h1>{pageContext.name}</h1>
<div className={styles.actionContainer}>
<div className={styles.addToButtonContainer}>
<Button
onClick={() => { showNotification() }}
fullWidth
level={'primary'}
setProductID={setProductID}>
Add to Bag
</Button>
</div>
</div>
</div>
}
I am using a template and trying to add functionality but unable to work out how to pass data through to the other components. The miniCart component has hardcoded mock data but I want to pass in the data per product which was retrieved from the json file.
MiniCart.js
const MiniCart = ({props}) => {
const sampleCartItem = {
image: '',
alt: '',
name: 'name',
price: 220,
color: 'Anthracite Melange',
size: 'xs',
};
return (
<div className={styles.root}>
<div className={styles.titleContainer}>
<h4>My Bag</h4>
</div>
</div>
....
The <MiniCart> reference is within another component (header.js). Levels above the Product.js, therefore I was unable to use to pass the selected product's data across.
header.js
<Drawer visible={showMiniCart} close={() => setShowMiniCart(false)}>
<MiniCart />
</Drawer>
If anyone is able to help I would greatly appreciate :)