Redux: Action was successfully dispatched but the State was not created

I am just making a simple app to learn Redux. I use the Redux DevTools to see my 2 states: lists and todos. However it shows only todos and although I tried everything I know, it doesn't show lists:

Initial State:

After clicking on the "Add" buttons:

Here are my codes:

lists.js

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

const slice = createSlice({
  name: "lists",
  initialState: [],
  reducers: {
    listAdded: (lists, action) => {
      lists.push({
        id: action.payload.id,
        title: action.payload.title,
        todos: action.payload.todos,
      });
    },
  },
});

export const { listAdded } = slice.actions;
export default slice.reducer;

todos.js

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

const slice = createSlice({
  name: "todos",
  initialState: [],
  reducers: {
    todoAdded: (todos, action) => {
      todos.push({
        id: action.payload.id,
        content: action.payload.content,
        check: action.payload.check
      });
    },
    todoEdited: (todos, action) => {
      const index = todos.findIndex((todo) => todo.id === action.payload.id);
      todos[index].content = action.payload.content;
    }
  }
});

export const { todoAdded, todoEdited } = slice.actions;
export default slice.reducer;

reducer.js

import { combineReducers } from "redux";
import todosReducer from "./todos";
import listsReducer from "./lists";

export default combineReducers({
  lists: listsReducer,
  todos: todosReducer
});

configureStore.js

import { configureStore } from "@reduxjs/toolkit";
import reducer from "./reducer";

const store = () => {
  return configureStore({ reducer });
};

export default store();

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import store from "./configureStore";
import { Provider } from "react-redux";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

So as you see, it takes the action after I use dispatch. However, because it doesn't have the state, when I use lists.map, it says 'TypeError: Cannot read property 'map' of undefined'

What do I do wrong please? Please help! I appreciate it!

edit: Put more codes related to the Add buttons:

App.js

import React from "react";
import ItemTodo from "./ItemTodo";
import ItemList from "./ItemList";
import { useSelector } from "react-redux";
import NewListButton from "./NewListButton";
import NewTodoButton from "./NewTodoButton";

function App() {
  const todos = useSelector((state) => state.todos);
  const lists = useSelector((state) => state.lists);
  return (
    <div className="App">
      <div className="todo-list">
        <NewListButton />
        <div>
          {lists.map((item) => (
            <ItemList key={item.id} title={item.title} />
          ))}
        </div>
        <div>
          <h2>write a todo</h2>
          {todos.map((item) => (
            <ItemTodo
              key={item.id}
              id={item.id}
              content={item.content}
              check={item.check}
            />
          ))}
          <NewTodoButton />
        </div>
      </div>
    </div>
  );
}

export default App;

ItemList.js

import React from "react";

const ItemList = ({ title }) => {
  return (
    <div className="list-item">
      <h2>{title}</h2>
      <div className="list-edit">edit name</div>
      <div className="list-remove">remove list</div>
    </div>
  );
};

export default ItemList;

ItemTodo.js

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { todoEdited } from "./todos";

const ItemTodo = ({ id, content, check }) => {
  const dispatch = useDispatch();
  const [contentX, setContentX] = useState("");
  const inputTodo = (e) => {
    setContentX(e.target.value);
  };
  const clickEdit = (e) => {
    e.preventDefault();
    dispatch(todoEdited({ id, content: contentX }));
  };
  return (
    <div>
      <form className="nav-submit">
        <input
          type="text"
          onClick={inputTodo}
          onChange={inputTodo}
          value={contentX}
          onBlur={clickEdit}
        />
      </form>
    </div>
  );
};

export default ItemTodo;

NewListButton.js

import { listAdded } from "./lists";
import { v4 as uuidv4 } from "uuid";
import { useDispatch } from "react-redux";
import React, { useState } from "react";

const NewListButton = () => {
  const dispatch = useDispatch();
  const [titleX, setTitleX] = useState("");
  const getListTitle = (e) => {
    setTitleX(e.target.value);
  };
  const setNewList = (e) => {
    e.preventDefault();
    const id = uuidv4();
    dispatch(listAdded({ id, title: titleX, todos: [] }));
    setTitleX("");
  };
  return (
    <div className="nav-list">
      <h2>write a list</h2>
      <form action="">
        <input type="text" onChange={getListTitle} value={titleX} />
        <button className="button-newlist" onClick={setNewList}>
          New List
        </button>
      </form>
    </div>
  );
};

export default NewListButton;

NewTodoButton.js

import React from "react";
import { v4 as uuidv4 } from "uuid";
import { useDispatch } from "react-redux";
import { todoAdded } from "./todos";

const NewTodoButton = () => {
  const id = uuidv4();
  const dispatch = useDispatch();
  const newTodo = (e) => {
    e.preventDefault();
    dispatch(todoAdded({ id, content: "", check: true }));
  };
  return (
    <div>
      <button className="button-new" onClick={newTodo}>
        New Todo
      </button>
    </div>
  );
};

export default NewTodoButton;

edit: more info.

Here is something strange:

I added a file: ListInitialState.js

const ListInitialState = [
  {
    id: 1,
    title: "first list",
    todos: [],
  },
];

export default ListInitialState;

then import ListInialState.js to list.js:

import ListInitialState from "./ListInitialState";
import { createSlice } from "@reduxjs/toolkit";

const slice = createSlice({
  name: "lists",
  initialState: ListInitialState,
  reducers: {
    listAdded: (lists, action) => {
      lists.push({
        id: action.payload.id,
        title: action.payload.title,
        todos: action.payload.todos,
      });
    },
  },
});

export const { listAdded } = slice.actions;
export default slice.reducer;

Finally it worked but I had no idea why:

It would be great if someone explains it. I really appreciate it!