i want to build e-commerce application with react and redux

i was devide the data and state of the application into slice,i used the sliceReducer in this project because it have so many component and have a lot of products categories to buy so when i try to make the first components which is about mechanics product this error always display “×
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.”
   so this mecanicsSliceProducts:

import {createSlice} from '@reduxjs/toolkit';

const mecanicsProducts = [{name:"aprilia404", description: "Aprilia404 cylindres en V longitudinal de 65° 4 temps,refroidissement au liquide distribution bi-arbre à cames (DOHC) quatre soupapes par cylindre ", img: 'C:/Users/ADMIN/Desktop/Bike project/banner/aprilia404', number: 12 ,moteur:"4 cylindres", vitesseMax: "140km/h", reservoir: '55l', price: 3000, quantity: 0, id: 0}, 
{name: "Aprilia Dosudoro", description:"L’Aprilia Dorsoduro est la moto fun par excellence.Née d'une intuition brillante d’Aprilia, elle a été créée dans le seul but de donner autant de plaisir que possible  ", img: 'C:/Users/ADMIN/Desktop/Bike project/banner/apriliascooter', number: 8 ,moteur:"bicylindre", vitesseMax:"260km/h", reservoir: "12l" ,price: 12500, quantity: 0, id:1}, 
{name: 'Aprilia Sr 50', description:"Estampillée du numéro 3 et peinte aux couleurs de l’Aprilia Alitalia Racing Team, l’engin ne devrait pas passer inaperçu.", img: 'C:/Users/ADMIN/Desktop/Bike project/banner/aprilia sr 50', number: 12, moteur:"monocylindre", vitesseMax: '100km/h',reservoir: '7l', price: 4000, quantity: 0, id:2}, 
{name: "Ducati monter", description: "Ducati Monster est une gamme de motos du constructeur italien Ducati de type roadster lancée en 1992", img: 'C:/Users/ADMIN/Desktop/Bike project/banner/ducati monster 110s2009 modele3d', number: 12, moteur: "2 cylindres", vitesseMax: '260km/h', reservoir: "14l" ,price: 14500, quantity: 0, id: 3},
{name: "Honda cbr 600", description:"La Honda CBR600RR est une moto de 599 cm³, de la famille des CBR introduite par Honda en 2003", img: 'C:/Users/ADMIN/Desktop/Bike project/banner/honda 623 cbr bike', number: 5, vitesseMax: '260km/h', moteur: "4 cylindres, 4temps, refroidissement liquide", reservoir:"18.1l", price: 23400, quantity: 0, id:4}, 
{name: "Forza ftm", description: "Cyclomoteur FORZA-FTM ,Cylindrage 110CC , Charge utile : 110 Kg , Vitesse Max : 160 Km/h , Réservoir : 4.5Litres.", img: 'C:/Users/ADMIN/Desktop/Bike project/banner/forzaftm', number: 15, moteur: "monocylindre", vitesseMax: "160km/h", price: 2400, quantity: 0, id: 5}];

export const mecanicSliceProducts = createSlice({
    name: 'mecanicsProducts',
    initialState: mecanicsProducts,
    reducers: {
        changeQuantity: (state, action) => {
          let {name, newQuantity} = action.payload;
          let findProductName = state.find(product => product.name === name);
          if (findProductName) {
            findProductName.quantity = newQuantity;
          }
         return state;
        },
      buyProduct: (state, action) => {
        const purchasedProduct = state.find(product=> product.id === action.payload.id);
        if(purchasedProduct) {
            purchasedProduct.quantity += 1;
            purchasedProduct.number = purchasedProduct.number - purchasedProduct.quantity;             
        }
        return [...state, purchasedProduct]
      }
    

    }

});

export const selectPurchasedProducts = (state) => {
    return state.mecanicsProducts.filter(product => product.quantity !== 0).map(product => product.id)
};
    export const selectmecanicsProductsToDisplay = (state) => {
        return state.mecanicsProducts.map(product => ({
            name: product.name,
            img: product.img,
            price: product.price,
            id: product.id
        }))
    };
    console.log(selectmecanicsProductsToDisplay)

    export const {changeQuantity, buyProduct} = mecanicSliceProducts.actions;

export default mecanicSliceProducts.reducer;

this is the mecanicsProduct.js file:

import React from 'react';
import { selectmecanicsProductsToDisplay } from './mecanicSliceProducts';
import {useSelector} from 'react-redux';
import { Product } from '../Product.js'


export const MecanicProducts = () => {
    const mecanicsProducts = useSelector(selectmecanicsProductsToDisplay);
    console.log(mecanicsProducts);

return (
<div className="mecanics" >
<h2> Motors selections</h2>
{mecanicsProducts.map(product => <Product product={product} key={product.id} />
)}
</div>
    )
}

this is the store.js file :

import { configureStore } from '@reduxjs/toolkit';
import  mecanicSliceProductsReducer   from '../../features/mecanicsProducts/mecanicSliceProducts';

export const store = configureStore({
    reducer: {
        mecanicsProducts: mecanicSliceProductsReducer,
    }
})

this is the index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { App } from './App';
import { Provider } from 'react-redux';
import { store } from './components/App/store.js';


ReactDOM.render(
  
  <Provider store={store} >
    <App />
    </Provider >,
 
  document.getElementById('root')
);

this is the App.js file :

import React from 'react';
import { Navbar } from './components/Navbar/Navbar';
import {MecanicProducts} from './features/mecanicsProducts/mecanicsProducts'
 

export function App() {
  return (
    <div className="App">
      <Navbar />
      <MecanicProducts />
    </div>
  );
}