I am trying to make a e-commerce website in which i need to wrap my app component in context provider but as soon as i wrap it, the site becomes blank.

This is my Context Provider

import React, { createContext } from "react";
import all_product from '../Components/Assets/all_product'

export const ShopContext = createContext(null);

const ShopContextProvider = (props) => {
    const contextValue = {all_product};
    return(
        <ShopContext.Provider value={contextValue}>
            {props.fictional}
        </ShopContext.Provider>
    )
}
export default ShopContextProvider;

And this is my index component

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import ShopContextProvider from './Context/ShopContext';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ShopContextProvider>
      <App/>
    </ShopContextProvider>
  </React.StrictMode>
);

Help me know where i am lacking
PS: I am new to developing so please answer in that way. Thank you so much for the help.