Redux5 응용 질문입니다

해당 상품의 제거 버튼을 클릭시 prams 데이터인 
data.id 와 state를 filter 메서드로부터 하나씩 나오는 data의 id와 다른 data만 
newarray 에 담아서 현재 state에 담아줬는데 제거 버튼이 잘 작동이 안되는데 
어떻게 하면 해결 할 수 있을까요??
혹시 기본적인 코드가 잘못된건가 해서 state.pop()을 실행 했을때는 
마지막 요소가 하나씩 제거가 되는게 보였습니다.

// Cart.js
<button onClick={()=> {
                      dispatch((deleteData(data.id)))
                    }}>제거</button>


// store.js

let cartData = createSlice({
  name: 'cartData',
  initialState: [
    {id : 0, name : 'White and Black', count : 2},
    {id : 2, name : 'Grey Yordan', count : 1}
    ],
  reducers: {
   deleteData(state,action) {
      console.log(action.payload);
      let newarray = state.filter((data)=> {
        return data.id !== action.payload
      })
      state = newarray
    }

  }
})

export let {changeCartData,addCartData,deleteData} = cartData.actions