React + Redux Удаление карточки товара не работает и слетела функция подсчитывающая количество товара на главной странице

Пытаюсь осуществить функцию удаления товаров по клику на кнопку с помощью метода filter, но почему-то не выходит. Подскажите пожалуйста, что я делаю не так? Кроме того слетела функция подсчета товара на главной станице из-за манипуляций с добавлением карточек. Теперь не пойму как сделать что-бы товар снова считался.

Вот тут код: index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import Products from './Pages/Products';

import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux'; 
import store from './store'


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <Provider store = {store}>
    <App />
    </Provider>
    </BrowserRouter> 
  </React.StrictMode>
);

reportWebVitals();

App.js:

import React from 'react'
import './App.css';
import Products from './Pages/Products'
import Basket from './Pages/Basket'
import NotFound from './Pages/NotFound'


function App() {
  return (
<>
<div className = "products">
       <Products />
</div>
<div className = "basket">
       <Basket />
 </div>
 <div className = "notfound">
       <NotFound />
 </div>
 </>
  );
}

export default App;

Products.js:

import Card from '../components/elements/card.js';
import { products } from '../products';
import './Products.css'
import React, { useState, useEffect } from 'react';
import Basket from './Basket';
import NotFound from './NotFound';
import { Link } from 'react-router-dom';


function Products () {

  const [productsSum, setProductsSum]=useState(0);

  const [countsSum, setCountsSum]=useState(0);


  //функция 
  /*const addProduct = (price) => {
    setProductsSum(productsSum => productsSum + parseInt(price));
    setCountsSum(countsSum => countsSum + 1);
  }*/

  const [addCard, setAddCard]=useState([])

  useEffect (()=>{
    fetch('{products}')
    .then(response => response.json())
    .then(data => setAddCard(data))
  }, [])

 

    return (
    <main className = "main">
     <div className = "container">
       <header className = "header">
         <h1>наша продукция</h1>
         <div className = "basketArea">
           <div calssName = "total">
              {countsSum} товара на сумму {productsSum} &#8381;</div>
              <Link to={'./Basket'} className = "link"><img className = "basket-img" src= "/Group 71.png"></img></Link>
         </div>
       </header>

       <div className = "menu">
              {products.map(key => {
                     const {url, title, description, price, weight} = key;
                     return(
                            <Card 
                            url={url} 
                            title = {title} 
                            description={description} 
                            price={price} 
                            weight={weight} 
                            //handleClick = {() => addProduct(price)}
                            />
                     )
              })}
       </div>
       
     </div>
     
    </main>
  );
  
}

export default Products;

Basket.js:

import React from 'react';
import {products} from '../products';
import './Basket.css';
import CardBasket from '../components/elements/card-basket.js';
import { Link } from 'react-router-dom';
import { useSelector } from "react-redux";

function Basket () {
  const basket = useSelector(state => state.basket.basket)
  
  console.log (basket);
    
  return (
    <main className = "main-basket">
     <div className = "container-basket">
       <header className = "header-basket">
         <Link to={'./Products'} className = "header-basket__returnLink">
          <img src = "./Group 64.png"></img> </Link>
         <h1>Корзина с выбранными товарами</h1>
       </header>

       <div className = "menu-basket">
              {basket.map(item => {
                     const {url, title, description, price, weight} = item;
                     return(
                            <CardBasket
                            url={url} 
                            title = {title} 
                            price={price} 
                            />
                     )
              })}
         
       </div>
       <div className = "line"></div>
       <footer className = "footer-basket">
         <h2 className = "footer-basket__header">Заказ на сумму: {} </h2>
         <button className = "footer-basket__btn">Оформить заказ</button>
       </footer>
     </div>
    </main>
  );
}

export default Basket;

components card.js:

import React from 'react';
import './card.css';
import { useDispatch } from 'react-redux';
import { addProduct } from '../../store/reducers/basket';
import { v4 as uuidv4 } from 'uuid';

function Card({url, title, description, price, weight}) {

const dispatch = useDispatch()

let item = {
  id: uuidv4(),
  title: title,
  url: url,
  price: price,
  weight: weight
}

const handleAddProduct = () =>{
  dispatch(addProduct(item))
}

    return (
      <div className = "card">
        <img className = "card__preview" src={url} alt = "" />
        
        <h2 className = "card__title">{title}</h2>

        <p className = "card__description">{description}</p>
      
        <div className = "card__price">
          {price} Р/ {weight}
          <button className = "card__card-add-btn" onClick={handleAddProduct}>
          +
        </button>
        </div>
      </div>
    );
  }
  
  export default Card;

card-basket.js:

import React from 'react';
import './card-basket.css';


function BCard({ url, title, price }) {
    return (
      <div className = "bcard">
        <img className = "bcard__preview" src={url} alt = "" />
        
        <h2 className = "bcard__title">{title}</h2>
      
        <div className = "bcard__price">
          {price} Р
          <button className = "bcard__add">
          x
        </button>
        </div>
      </div>
    );
  }
  
  export default BCard;

reducers basket.js:

import React from "react";
import { createSlice } from "@reduxjs/toolkit";

const basketSlice = createSlice({
    name: 'basket',
    initialState: {
        basket: []
    },
    reducers: {
        addProduct(state, action) {
            console.log ('addProduct');
            state.basket.push (action.payload);
            state.priceProducts = state.basket.reduce ((sum,current) =>{
            return sum + current.price
             }, 0) //- это для подсчета суммы
        },
        removeProductFromBasket(state, payload){ 
            state.priceProducts = state.basket.filter ((item) =>{
                return item.id !== payload
                 })
            state.priceProducts = state.basket.reduce ((sum,current) =>{
                return sum + current.price
                }, 0)
        }
    }
})

export const { addProduct, removeProductFromBasket } = basketSlice.actions

export default basketSlice.reducer

index.js:

import React from "react";
import { configureStore } from "@reduxjs/toolkit";
import basketReducer from './reducers/basket'


export default configureStore({
    reducer: {
        basket: basketReducer
    }
})