I am setting the initial state in redux with

      useEffect(() => {
        data?.map((user) =>
          dispatch(
            addUser({
              id: user.id,
              name: user.name,
              username: user.username,
              email: user.email,
              address: {
                city: user.address.city,
              },
            })
          )
        );
      }, [data, dispatch]);

which dispatches

    addUser(state, action: PayloadAction<User>) {
      return [...state, action.payload];
    },

The thing is that every time the component rerenders, the same items are added to the array. I know why it happens, but I don't know how to fix it. Could anyone help, please? data is fetched from an api