ошибка с массивом в redux

import { useDispatch, useSelector } from "react-redux";

function App() {
  const dispatch = useDispatch();
  const cash = useSelector((state) => state.cash.cash);
  const customers = useSelector((state) => state.customers.customers);

  const addCash = () => {
    dispatch({ type: "ADD_CASH", payload: 5 });
  };
  const getCash = () => {
    dispatch({ type: "GET_CASH", payload: 5 });
  };

  const addCustomer = (name) => {
    const customer = {
      name,
      id: Date.now(),
    };
    dispatch({ type: "ADD_CUSTOMER", payload: customer });
  };

  return (
    <div>
      <div>{cash}</div>
      <button onClick={() => addCash()}>Пополнить счёт</button>
      <button onClick={() => getCash()}>Снять со осчёта</button>
      <br />
      <button onClick={() => addCustomer(prompt())}>Добавить клиента</button>
      <button onClick={() => removeCustomer()}>Убрать клиента</button>
      {customers.length > 0 ? (
        <div>
          {customers.map((customer) => (
            <div key={customer.id}>{customer}</div>
          ))}
        </div>
      ) : (
        <div>There are no customers</div>
      )}
    </div>
  );
}

export default App;

и редьюсор:

const defaultState = {
  customers: [],
};

export const customerReducer = (state = defaultState, action) => {
  switch (action.type) {
    case "ADD_CUSTOMER":
      return { ...state, customers: [...state.customers, action.payload] };
    

    default:
      return state;
  }
};