react vite no console message

Question

I have a problem when I want to retrieve data in the following code

ProductContext.jsx

import React, { useEffect, useState } from 'react';


export const ProductContext = React.createContext();

const ProductProvider = ({ children }) => {
  console.log("ProductProvider");
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch('https://fakestoreapi.com/products')
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        console.log(" ");
        setProducts(data);
      })
      .catch((error) => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return <ProductContext.Provider value={{ products }}>{children}</ProductContext.Provider>;
};

export default ProductProvider

index.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import ProductProvider from './contexts/ProductContext'

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

The product provider doesn't display data when I do console(data), even when I try any console in the product provider no messages come out in the console.

I hope there will be data coming in when console(data)