Увеличение счётчика в конкретном элементе (по его id)

Столкнулся с такой проблемой, что при увеличении/уменьшении счётчика (increaseCounter и decreaseCounter), он увеличивается/уменьшается во всех товарах добавленных в корзину сразу. Пробовал метод findIndex() для нахождения конкретного элементов массива, но помогло это только со слайсом удаления.

productSlice.js:

import { createSlice } from "@reduxjs/toolkit";
import products from '../data/products.json'


const productSlice = createSlice({
    name: "product",
    initialState: {
        addedProduct: [],
        products: products,
        value: 1
    },
    reducers: {
        addToBasket: (state, action) => {
            const item = action.payload;
            // Условие проверки на наличие элемента в массиве (чтобы элемент не повторялся)
            if(!state.addedProduct.some(repeat => repeat._id == item._id)) {
                state.addedProduct.push(item)
            }
        },
        deleteInBasket: (state, action) => {
            const index = action.payload._id
            const deleteCurrentIndex = state.addedProduct.findIndex(element => element._id == index)
            if(!deleteCurrentIndex !== -1) {
                state.addedProduct.splice(deleteCurrentIndex, 1)
            }
        },
        increaseCounter: (state, action) => {
            const valIndex = action.payload._id
            const valueId = state.addedProduct.findIndex(element => element._id == valIndex)

            if(!valueId) {
                state.value += 1
            }
        },
        decreaseCounter: (state) => {
            state.value = state.value > 1 ? state.value -= 1 : 1
        }
    }
})


export const productAction = productSlice.actions
export const productReducer = productSlice.reducer

Компонент (корзина) в котором отображаются товары:

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import '../index.css'
import { productAction } from '../store/productSlice'


const Basket = () => {
    const basketProducts = useSelector(state => state.product.addedProduct)
    const counter = useSelector(state => state.product.value)
    const dispatch = useDispatch()

    const handleIncrease = (plus) => {
      dispatch(productAction.increaseCounter(plus))
    }

    const handleDecrease = (minus) => {
      dispatch(productAction.decreaseCounter(minus))
    }


    const deleteProduct = (del) => {
      dispatch(productAction.deleteInBasket(del))
    }

  return (
    <div className='product'>
        {basketProducts.map((thisItem) => (
            <div key={thisItem._id} className='product--info'>
                <h2>{thisItem.name}</h2>
                <h3>{thisItem.price}</h3>
                <img src={thisItem.picture} alt="picture" className='product--image'/>
                <span>{thisItem.description}</span>
                <p>{thisItem.category}</p>
                <div className='product--counter'>
                  <button onClick={() => handleIncrease()}>+</button>
                  {counter}
                  <button onClick={() => handleDecrease()}>-</button>
                </div>
                <button onClick={() => deleteProduct(thisItem)}>DELETE</button>
            </div>
        ))}
    </div>
  )
}

export default Basket