title: React redux toolkit 'Cannot set properties of undefined (setting 'check')
body: <p>Im try to make a todo list with React and Redux Toolkit, i searching for this error so many times but still don't have a answer to solve a problem.</p>
  <p>I think my action.payload is well defined. removeItem, toggleItem is worked fine, but i can only using one of them. When i add toggleItem function, i received the following error</p>
  <pre><code>Cannot set properties of undefined (setting 'check')
  </code></pre>
  <p>Here are my full code on stackblitz <a href="https://stackblitz.com/edit/react-ts-bqmjz1?file=redux%2Ffeatures%2FtodoSlice.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/react-ts-bqmjz1?file=redux%2Ffeatures%2FtodoSlice.ts</a></p>
  <p><strong>createSlice.ts file</strong></p>
  <pre><code>import { createSlice, PayloadAction } from '@reduxjs/toolkit';
  
  const todoSlice = createSlice({
    name: 'todo',
    initialState: [],
    reducers: {
      addItem: (state, action: PayloadAction&lt;Todo&gt;) =&gt; {
        const newItem = {
          id: new Date().getTime().toString(),
          title: action.payload.title,
          check: action.payload.check,
        };
        state.unshift(newItem);
      },
      removeItem: (state, action: PayloadAction&lt;Todo&gt;) =&gt; {
        return state.filter((item) =&gt; item.id !== action.payload.id);
      },
  
      //Toggle check 
      toggleCheck: (state, action: PayloadAction&lt;Todo&gt;) =&gt; {
        const index = state.findIndex((item) =&gt; item.id === action.payload.id);
        state[index].check = action.payload.check;
      },
    },
  });
  
  export const { addItem, removeItem, toggleCheck } = todoSlice.actions;
  
  export default todoSlice.reducer;
  </code></pre>
  <p>**TodoItem.tsx **</p>
  <pre><code>const TodoItem = ({ item }) =&gt; {
    const dispatch = useDispatch();
  
    const handleRemove = () =&gt; {
      dispatch(removeItem({ id: item.id }));
    };
  
    const handleToggle = () =&gt; {
      dispatch(toggleCheck({ id: item.id, check: !item.check }));
    };
  
    return (
      &lt;li
        className={`border border-2 list-group-item my-2 ${
          item.check ? 'border-primary text-primary' : 'border-dark'
        }`}
        onClick={handleToggle}
      &gt;
        &lt;div className=&quot;d-flex justify-content-between align-items-center&quot;&gt;
          &lt;h4&gt;{item.title}&lt;/h4&gt;
          &lt;i onClick={handleRemove} className=&quot;fas fa-times text-danger&quot;&gt;&lt;/i&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    );
  };
  
  export default TodoItem;
  </code></pre>