Self project

please can someone help me to build my self e-commerce project by using react and redux lessons within it so iwant to expose a bunch of categories products in my project for example the first component is for the motors product , the second for the heater devices and so on …,then I just begin to make the first component and I reach this type of error showing, the error is in the Motors file : "
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 is all my files project :

the index.js file :

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


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.js';
import {Motors} from './features/mecanicsProducts/mecanicsProducts.js';

export const App = () => {

return (
<div className='app' >
<Navbar />
<Motors />
</div>
)

}
````
this is the mecanicSliceProduct.js : 
````
const motors = [{name: "aprilia caponord", description:"Le gros bicylindre envoyant 130 bourrins sur le gros SMV, le Caponord sort grosso modo la même patate", price: 37000, reservoir: "24 L", moteur: "bicylindre 4temps", vitesse: "200km/h", nombre: 7, quantité: 0, id: 0 }, 
{name: "aprilia rsv4", description: "LA RSV4 RR d’Aprilia est déclinée sur la base de la machine championne en WSBK en 2014", price: 29000, reservoir: "18.5 L", moteur: "4 cylindres, 4 temps", vitesse: "290 km/h", nombre: 6, quantité: 0, id: 1},
{name: "aprilia sr150", description: "PARTIE CYCLE Aprilia SR 150 4T · Accessoires partie cycle · Guidon, poignées, levier ", price: 5000 ,reservoir: "6.5 L", moteur: "monocylindres", vitesse: "110 km/h", nombre: 16, quantité: 0, id: 2},
{name: "Ducati Desmosidici", description: "La Desmosedici de Grand Prix a actuellement du mal à faire mordre la poussière à ses concurrentes", price: 35000, reservoir: "22 L", moteur: "Quatre-cylindres en V à 90°", vitesse: "290 km/h", nombre: 4, quantité:0, id:3},
{name: "Honda cbr 1000", description: "Seul le temps juge les légendes.", price: 35000, reservoir: "16.1 L", moteur: "4 cylindres, 4temps", vitesse: "290 km/h", nombre: 4, quantité: 0, id: 4},
{name: "Forza FTM", description: "Cyclomoteur FORZA-FTM ,Cylindrage 110CC , Charge utile : 110 Kg , Vitesse Max : 160 Km/h ", price: 2400, reservoir: "4.5 L", vitesse: "160km/h", nombre: 20, quantité: 0, id: 5}];

export const motorsReducer = (state = motors, action) => {
	switch(action.type) {
		case 'motors/buy':
			const articleToBuy = state.find(product => product.name === action.payload.name);

			if (articleToBuy) {

				articleToBuy.quantité += 1;
				articleToBuy.number -=  articleToBuy.quantité;

			} if (articleToBuy.quantité > articleToBuy.number) {
				state.filter(product=>  product.number === 0)
			}
			return [...state, articleToBuy];
		
		case 'motors/changeQuantity': 
			const {name, newQuantity} = action.payload;
			let productToUpload = state.find(product => product.name === name);
			const uploadedProduct = {...productToUpload, newQuantity};
		
		return [...state, uploadedProduct];
	
	default:
	return state;
}

};

const buyProduct = (product) => {
	return {
		type: 'motors/buy',
	    payload: product
}
};
const changeQuantity = (product) => {
	return {type: 'motors/changeQuantity',
	payload: product };
};

export const selectmotorsProduct = (state) => {
	return state.motors.map(motor => ({
		name: motor.name,
		img: motor.img,
		price: motor.price
	}))
};
export const selectPurchasedMotors = (state) => {
	return state.motors.filter(motor => motor.quantité !== 0).map(motor=> motor.id)
} 
````
this is the Motors file: 
````
``import {selectmotorsProduct} from './mecanicSliceProducts';
import React from 'react';
import {Product} from '../Product.js';
import {useSelector} from "react-redux";

export const Motors = () => {
	const motorsProduct = useSelector(selectmotorsProduct);
	return (
	<div className="motors" >
	{motorsProduct.map(motor => <Product product={motor} />

	)}
	</div>
	)
}

the file Product.js :

import React from "react";

export const Product = ({product}) => {
	
	return (<div className="product" >
		<h2>{product.name}</h2>
		<img src={product.img}  alt='' />
		<p>{product.price}</p>	
		</div>
			)
}
````