title: Failed to add new elements when set initialState as an empty object
body: <p>I try to use redux toolkit and I have this as <code>menu-slice.js</code>
  I try to use property accessors to add a new property to <code>fileItems</code>, its initial value is an empty object.</p>
  <pre><code>  import { createSlice } from &quot;@reduxjs/toolkit&quot;;
  
    const menuSlice = createSlice({
      name: &quot;ui&quot;,
      initialState: {
        fileItems: {},
      },
      reducers: {
          setFileDate: (state, action) =&gt; {
            state.FileDate = action.payload;
          },
          replaceFileItems: (state, action) =&gt; {
            const filesList = action.payload.map((fileName) =&gt;
              fileName.slice(fileName.indexOf(&quot;/&quot;) + 1)
            );
            state.fileItems[state.FileDate] = filesList;
            console.log(`filesList: ${filesList}`);
            console.log(`state.fileItems: ${JSON.stringify(state.fileItems)}`);
            console.log(`state.FileDate: ${state.FileDate}`);
  
            state.fileContents = null;
          },
  </code></pre>
  <p>I call dispatch with the api return value (  <code>dispatch(menuActions.replaceFileItems(fileResponse.data));</code>)
  in <code>menu-action.js</code>:
  the return value is an array of strings.</p>
  <pre><code>    export const fetchFiles = (fileDate) =&gt; {
        return async (dispatch) =&gt; {
          const fetchFilesList = async () =&gt; {
            const response = await fetch(
              &quot;some url&quot; +
                new URLSearchParams({
                  env: &quot;https://env.com&quot;,
                  date: fileDate,
                })
            );
  
            if (!response.ok) {
              throw new Error(&quot;Fail to fetch files list!&quot;);
            }
            const data = await response.json();
            return data;
          };
  
          try {
            const fileResponse = await fetchFilesList();
            dispatch(menuActions.setFileDate(FileDate));
            dispatch(menuActions.replaceFileItems(fileResponse.data));
  
          } catch (error) {
            dispatch(
              menuActions.showNotification({....
              })
            );
          }
        };
      };
  </code></pre>
  <p>But it never prints console logs and didn't display where went wrong in the console or in the chrome redux extension.</p>
  <p>I want to add data into <code>state.fileItems</code> on each click that triggers<code> fetchFiles()</code> when it returns a new array:
  from <code>state.fileItems = {}</code>
  check if <code>state.fileItems</code> already has the date as key,
  if not already has the date as key,
  change to ex: <code>state.fileItems = {&quot;2022-01-01&quot;: Array(2)}</code>
  and so on..
  ex: <code>state.fileItems = { &quot;2022-01-01&quot;: Array(2), &quot;2022-01-02&quot;: Array(2) }</code></p>
  <p>I also tried to set <code>state.fileItems</code> as an empty array, and use push, but it didn't work either, nothing printed out, <code>state.fileItems</code> value was always <code>undefined</code>.</p>
  <p>Can anyone please tell me why this didn't work?
  Thanks for your time to read my question.</p>