Не могу удалить в React элемент из массива с помощью filter. При нажатии на элемент он должен удалиться. В проекте использую React-redux, redux

Редюс отдельно

const defaultState = {
    customers: []
  } 
  
  export const customersReducer = (state=defaultState, action) => {
    switch (action.type) {
  
      case 'addCustomer':
        return {...state, customers: [ ...state.customers, action.payload]}
  
      case 'removeCustomer':
        return {...state, customers: state.customers.filter(customer => customer.id !== action.payload)}
  
      default:
        return state
    }
  }

Код:

const App = () => {

  const dispatch = useDispatch();
  const customers = useSelector(state=>state.customers.customers)

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

  const removeCustomer = (customer) => {
    dispatch({type: 'removeCustomer', payload: customer.id})
  }

  return (
    <div style={{display:'flex', justifyContent: 'center', flexDirection: 'column'}}>
      <div style={{display: 'flex', justifyContent: 'center', margin: '20px 0'}}>
        <div>
          <button onClick={()=>addCustomer(prompt())}>Add client</button>
        </div>
      </div>
      {customers.length > 0 ?
        <div>
            {customers.map(customer => 
              <div onClick={()=>removeCustomer()}>{customer.name}</div>
            )}
        </div>
        :
        <div style={{display: 'flex', justifyContent: 'center'}}>
          Клиентов нет
        </div>
      }
    </div>
  );
};

export default App;