دریافت ارور هنگام dispatch کردن در ریداکس

با سلام بنده زمانی که می خوام UserAdded دیس پچ کنم با ارور زیر مواجه میشم در زیر کامپونت ها رو آوردم ، سناریو به این صورته که من در کامپونت list.js مشکلی ندارم(کامپونته مادر) و به درستی دیس پچ انجام میشه ، و مشکل زمانی ایجاد میشه که من در فایلuserslice می خوام متد prepare ریترن کنم

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

کامپونتت addUser لازم به ذکر که این کامپونت ، کامپونت فرزند list.js می باشد

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { UserAdded } from "../redax/reducers";

function AddUser() {
  const dispatch = useDispatch;
  const [user, setUser] = useState(null);
  const [email, setEmail] = useState(null);

  const handelName = (e) => setUser(e.target.value);
  const handelٍEmail = (e) => setEmail(e.target.value);
  const handelSubmit = (e) => {
    e.preventDefault();
    dispatch(UserAdded(user));
  };

  return (
    <div>
      <form>
        <input
          type="text"
          placeholder="یوزر"
          onChange={handelName}
        />
        <input
          type="text"
          placeholder="ایمیل"
          onChange={handelٍEmail}
        />
        <button onClick={handelSubmit}>submit</button>
      </form>
    </div>
  );
}

export default AddUser;

کامپونته list.js
در اینجا dispatch به راحتی اجرا میشه (کامپونته مادر AddUser)

import "./list.scss";

import Layout from "../../components/layout/Layout";
import { UserAdded } from "../../redax/reducers/index";
import { selectAllUsers } from "../../redax/reducers/index";
import { useSelector, useDispatch } from "react-redux";
import AddUser from "../AddUser";

const List = () => {
  const user = useSelector(selectAllUsers);
  console.log(user);
  return (
    <Layout>
      <div className="card">
        <div className="card-body form-card"></div>

        <AddUser />

        {user.map((item) => {
          return <p>{item.name}</p>;
        })}
      </div>
    </Layout>
  );
};

export default List;

userSlice.js
حالا برای دی باگ کردنش برنامه تا زمانه preper شدن خو ب کار میکنه یعنی خط بیست اجرا میشه ولی خط 17 به ارو رذکر شده میخورم

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

const initialState = [
  { id: "0", name: "Dude Lebowski" },
  { id: "1", name: "Neil Young" },
  { id: "2", name: "Dave Gray" },
];

const usersSlice = createSlice({
  name: "users",
  initialState,
  reducers: {
    UserAdded: {
      reducer(state, action) {
        // state.push(action.payload);
        console.log(action.payload);
      },
      prepare(user) {
        console.log(user);
        return { payload: { user } };
      },
    },
  },
});

export const { UserAdded } = usersSlice.actions;
export const selectAllUsers = (state) => state.users;

export default usersSlice.reducer;

ممنون میشم راهنمایی کنید