I'm kind of new to redux and react and I'm kind of stuck. so I have this webapp that adds a new list to the redux state todos array.

In my redux devtools state the new list is being added properly but the useSelector in my app is not being updated properly and I can't seem to figure out why.

I tried looking it up online and tried different methods but they didn't work ;-; Sorry if this is a nooby question and ty in advance for any help <3

my App.js file:

import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addTask } from './redux/toDoSlice';
import SideBar from './components/SideBar';

function App() {
  const lists = useSelector((state)=> state.todos);
  return (
    <SideBar
       lists = {lists}
     />
  )
export default App;

toDoSlice.js file:

import {createSlice} from '@reduxjs/toolkit';
const toDoSlice = createSlice({
    name: "todos",
    initialState: [],
    reducers: {
        addList: (state , action)=>{
            state.push(action.payload.list);
        },
    }
});

export const {
  addList,
} = toDoSlice.actions;

export default toDoSlice.reducer;

my SideBar.js file:

import React, { useState } from "react";
import { useDispatch } from 'react-redux';
import { addList } from "../redux/toDoSlice";
export default function SideBar(props){
    const lists  = props.lists;
    const dispatch = useDispatch();
    const addNewListEvent = (e)=>{
        e.preventDefault();
        var date_time = new Date().toLocaleString();
        var title = 'my list '+date_time;

        var list = {
            _id:date_time,
            title:title,
            items:[]
        };
        dispatch(addList({list: list}));
    }
    return(
       <button onClick={addNewListEvent}>New</button>
    )
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
import store from './redux/store';

ReactDOM.render(
  <React.StrictMode>
    
    <Provider store={store}>
      <App />
    </Provider>

  </React.StrictMode>,
  document.getElementById('root')
);