Element is not rendered from redux

After clicking the "Add client" button, the state changes, but the element is not render

I started learning redux recently. I'm trying to understand the logic of the framework. Therefore, I decided to make a bank emulation. You can add money and get it. With clients the same functionality. But for some reason the added clients are not rendered

I think the problem in my App.js.

My App.js

import { useDispatch, useSelector } from "react-redux";
import "./App.css";

function App() {
  const dispatch = useDispatch();
  const cash = useSelector((state) => state.cash.cash); 
  const customers = useSelector((state) => state.customer.customers);
  const addCash = (cash) => {
    dispatch({ type: "ADD_CASH", payload: cash });
  };
  const getCash = (cash) => {
    dispatch({ type: "GET_CASH", payload: cash });
  };
  const addCustomer = (name) => {
    const customer = {
      name,
      id: Date.now(),
    };
    dispatch({ type: "ADD_CUSTOMER", payload: customer });
  };

  return (
    <div className="App">
      <div style={{ display: "flex" }}>
        <button onClick={() => addCash(Number(prompt()))}>Add cash</button>
        <button onClick={() => getCash(Number(prompt()))}>Get cash</button>
      </div>
      <div style={{ fontSize: "2rem" }}>{cash}</div>
      {customers.length > 0 ? (
        <div>
          {customers.map((customer) => {
            <div style={{ fontSize: "2rem" }}>{customer.name}</div>;
          })}
        </div>
      ) : (
        <div style={{ fontSize: "2rem" }}>No clients</div>
      )}
      <div style={{ display: "flex" }}>
        <button onClick={() => addCustomer(prompt())}>Add client</button>
        {/* <button onClick={() => getCash(Number(prompt()))}>Get client</button> */}
      </div>
    </div>
  );
}

export default App;

My store

import { createStore, combineReducers } from "redux";
import { cashReducer } from "./cashReducer";
import { customerReducer } from "./customerReducer";
import { composeWithDevTools } from "redux-devtools-extension";

const rootReducer = combineReducers({
  cash: cashReducer,
  customer: customerReducer,
});

export const store = createStore(rootReducer, composeWithDevTools());

**My sustomer reducer**

const defaultState = {
  customers: [],
};

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

My cash reducer

const defaultState = {
  cash: 5,
};

export const cashReducer = (state = defaultState, action) => {
  switch (action.type) {
    case "ADD_CASH":
      return { ...state, cash: state.cash + action.payload };
    case "GET_CASH":
      return { ...state, cash: state.cash - action.payload };
    default:
      return state;
  }
};

And my index.js

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

import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);
reportWebVitals();