reactjs – Deshabilitar Button solo cuando la lista se encuentre vacía sin items – React Hooks


mas o menos esto es un ejemplo de lo que quiere lograr o lo que se tiene, es un selector donde al escoger un item se va añadiendo un elemento uno debajo del otro, cada ítem que se añade tiene un botón delete, que debe eliminar su propio contenido, eso lo hace sin problemas, a la vez que elimina su contenido, debe deshabilitar el button, pero esto solo debe suceder cuando no exista ningún elemento en la lista cuando todos son removidos, al dar click en el botón delete remueve el contenido pero deshabilita el botón en cualquier momento, yo se que se la pase el evento que inhabilita el botón pero este debe estar por que la elección del contenidos puede ser cualquier item y cualquiera de ellos debería eliminar y deshabilitar el botón, lo que se necesita es decidir que el botón se deshabilite cuando la lista este vacía. acá surge una duda no se si detectar o deshabilitar cuando la lista este limpia o detectar el evento que ya tiene el botón pero solo cuando quede un item, y ese item sea el único o el ultimo que queda en la lista que pueda usar o activar la función del desactivar, tengo esa duda, cual seria la mejor forma de hacerlo

dejo el código que tengo . Gracias.

import React from "react";
import "./App.css";

const isSameItem = (id) => (item) => item.id === id;

const ITEMS_BENEFITS_DROP_DOWN = (
  { id: "0000", descripcion: "Condiciones estándares" },
  { id: "0001", descripcion: "Descuento 11x12" },
  { id: "0002", descripcion: "Descuento 13x12" },
  { id: "0003", descripcion: "Migración Pago por Kilómetros" },
  { id: "0004", descripcion: "SOAT gratis" },
);

const disabled = {
  backgroundColor: "#cccccc",
  fontSize: 200,
  color: "",
};

function App() {
  const (selected, setSelected) = React.useState(());
  const (btDisabled, setBtndisabled) = React.useState(true);
  const (removeItem_1, setRemoveItem_1) = React.useState(true);
  const (removeItem_2, setRemoveItem_2) = React.useState(true);
  const (removeItem_3, setRemoveItem_3) = React.useState(true);
  const (removeItem_4, setRemoveItem_4) = React.useState(true);
  const (removeItem_5, setRemoveItem_5) = React.useState(true);
  const handleChange = (e) => {
    if (selected.some(isSameItem(e.target.value))) {
      const items = selected.filter((s) => s.id !== e.target.value);
      setSelected(items);
    } else {
      const item = ITEMS_BENEFITS_DROP_DOWN.find(isSameItem(e.target.value));
      const n = selected.concat(item);
      setSelected(n);
      setBtndisabled(false);
    }
  };

  const RemoverItem_1 = (e) => {
    e.preventDefault();
    setBtndisabled(true);
    setRemoveItem_1(false)
    
  };
  const RemoverItem_2 = (e) => {
    e.preventDefault();
    setBtndisabled(true);
    setRemoveItem_2(false)
    
  };
  const RemoverItem_3 = (e) => {
    e.preventDefault();
    setBtndisabled(true);
    setRemoveItem_3(false)
    
  };
  const RemoverItem_4 = (e) => {
    e.preventDefault();
    setBtndisabled(true);
    setRemoveItem_4(false)
   
  };
  const RemoverItem_5 = (e) => {
    e.preventDefault();
    setBtndisabled(true);
    setRemoveItem_5(false)
    
  };

  return (
    <div className="App">
      <header className="App-header">
        <form>
          <select onChange={handleChange}>
            {ITEMS_BENEFITS_DROP_DOWN.map((item) => (
              <option id={item.id} value={item.id}>
                {item.descripcion}
              </option>
            ))}
          </select>
          {selected.map((s) => (
            <div key={s.id}>
              {removeItem_1 && s.descripcion === "Condiciones estándares" && (
                <div>
                  <p>
                    contenidos condiciones estandares{" "}
                    <button  onClick={(e) => {
                        RemoverItem_1(e);
                      }}>delete</button>
                  </p>
                </div>
              )}
              {removeItem_2 && s.descripcion === "Descuento 11x12" && (
                <div>
                  <p>
                    contenidos Descuento 11x12{" "}
                    <button onClick={(e) => {
                        RemoverItem_2(e);
                      }}>delete</button>
                  </p>
                </div>
              )}
              {removeItem_3 && s.descripcion === "Descuento 13x12" && (
                <div>
                  <p>
                    contenidos Descuento 13x12{" "}
                    <button
                      onClick={(e) => {
                        RemoverItem_3(e);
                      }}
                    >
                      delete
                    </button>
                  </p>
                </div>
              )}
              {removeItem_4 && s.descripcion === "Migración Pago por Kilómetros" && (
                <div>
                  <p>
                    contenidos Migración Pago por Kilómetros{" "}
                    <button  onClick={(e) => {
                        RemoverItem_4(e);
                      }}>delete</button>
                  </p>
                </div>
              )}
              {removeItem_5 && s.descripcion === "SOAT gratis" && (
                <div>
                  <p>
                    contenidos SOAT gratis{" "}
                    <button  onClick={(e) => {
                        RemoverItem_5(e);
                      }}>delete</button>
                  </p>
                </div>
              )}
            </div>
          ))}
          <div>
            <button type="button" disabled={btDisabled}>CONTINUAR</button>
          </div>
        </form>
      </header>
    </div>
  );
}

export default App;