How to correctly pass variables with json data to another component through the context?

Question

JavaScript

I'm trying to pass variables with json data to the component for their further use, but I run into errors. What should be changed so that variables with json arrays from Store.js can be used in product.js?
Thank you for your time!

https://jsfiddle.net/constant101/xu7zdn26/3/

```

//Store export(receiving data from the server and assigning them to variables)
import React, {useState, useEffect} from 'react'
import axios from 'axios'


export const ListContext = React.createContext([]);
export const ItemContext = React.createContext([]);

function Store() {
  const [storeProducts, setStoreProducts] = useState([]);
  const [detailProduct, setDetailProduct] = useState([]);

   useEffect(() => {
    axios.get('/products/')
    .then(res => {
      console.log(res)
      setStoreProducts(res.data)
    })
    },[])
console.log('storeProducts:', storeProducts)

 useEffect(() => {
    axios.get('/products/:productId')
    .then(res => {
      console.log(res)
      setDetailProduct(res.data)
    })
    },[])
console.log('detail product:', detailProduct)
  return (
  	
    <ListContext.Provider value={[storeProducts, setStoreProducts]}>
     <ItemContext.Provider value={[detailProduct, setDetailProduct]}>
       <product/>
        </ItemContext.Provider>
    </ListContext.Provider>


    );
}
export const detailProduct
//product.js ( file that uses data from the fetch)
import React, { useReducer, createContext, useContext, useState } from 'react';
import {ListContext, ItemContext } from '../Store';
import { useProductActions } from '../actions';
import { SET_PRODUCT_DETAILS } from '../actions/types';

  const [storeProducts] = useContext(ListContext);
  const [detailProduct] = useContext(ItemContext);

let tempProducts = [];

storeProducts.forEach(item => tempProducts.push({ ...item })
  );

const initialState = {
  products: tempProducts,
  productDetails: { ...detailProduct }
};
console.log(storeProducts)

const productReducer = (state, action) => {
  switch (action.type) {
    case SET_PRODUCT_DETAILS:
      return {
        ...state,
        productDetails: action.payload
      };
    default:
      throw new Error('Invalid action type');
  }
};

export const ProductContext = createContext(initialState);

export const useProductState = () => {
  return useContext(ProductContext);
};

export const ProductProvider = ({ children }) => {
  const [state, dispatch] = useReducer(productReducer, initialState);
  const productActions = useProductActions(state, dispatch);
  return (
    <ProductContext.Provider value={{ productState: state, productActions }}>
      {children}
    </ProductContext.Provider>
  );
};

```