Is there a way to modify the same state with several callbacks at the same time?

Question

I'm trying to modify a state which consists of an array of Objects. I have a form with 3 inputs (add, modify, delete) and I'd like to know if there is a way to apply all three callbacks, which I don't seem to be able to achieve, since I believe the function is working with a 'stale' state and therefore applies only 2 of the callbacks. I tried making all my code async but that does not seem to work. Here goes my code:

// I inherit the array from the context provider 
  const { libros, setLibros } = useContext(AppContext);

  const [libro, setLibro] = useState("");
  const [modificar, setModificar] = useState({
    libroAModificar: "",
    modificado: ""
  });
  const { libroAModificar, modificado } = modificar;

  const [eliminar, setEliminar] = useState("");

  const handleAgregar = (e) => {
    setLibro(e.target.value);
  };

  const handleEliminar = (e) => {
    setEliminar(e.target.value);
  };

  const handleModificar = (e) => {
    setModificar({
      ...modificar,
      [e.target.name]: e.target.value
    });
  };

// these are the three functions I'd like to execute on the same state
  const handleNuevoLibro = (e) => {
    e.preventDefault();
    if (libro !== "") {
      const conNuevosLibros = [
        ...libros,
        {
          nombre: libro,
          leido: false,
          id: libros.length + 1
        }
      ];
      setLibros(conNuevosLibros);
      setLibro("");
    }
  };

  const handleLibroModificado = (e) => {
    e.preventDefault();
    if (modificar !== "") {
      const modifiedLibros = libros.map((book) => {
        if (book.nombre.toLowerCase() === libroAModificar.toLowerCase()) {
          book.nombre = modificado;
        }
        return book;
      });
      setLibros(modifiedLibros);
      setModificar({
        libroAModificar: "",
        modificado: ""
      });
    }
  };

  const handleLibroEliminado = (e) => {
    e.preventDefault();
    if (eliminar !== "") {
      const librosConEliminado = libros.filter((book) => {
        return book.nombre.toLowerCase() !== eliminar.toLowerCase();
      });
      setLibros(librosConEliminado);
      setEliminar("");
    }
  };


// this is not working, it's only executing 2 of the three functions, or it's working on a stale state.
  const handleChange = (e) => {
    e.persist();
    handleNuevoLibro(e);
    handleLibroModificado(e);
    handleLibroEliminado(e);
  };

  return (
    <div>
      <form>
        <input
          type="text"
          placeholder="agregar"
          onChange={handleAgregar}
          value={libro}
        ></input>
        <br />
        <input
          type="text"
          name="libroAModificar"
          className="modificar"
          placeholder="inserte libro a modificar"
          onChange={handleModificar}
          value={libroAModificar}
        ></input>
        <input
          type="text"
          name="modificado"
          className="modificado"
          placeholder="inserte nuevo nombre"
          onChange={handleModificar}
          value={modificado}
        ></input>
        <br />
        <input
          type="text"
          className="borrar"
          placeholder="inserte libro a eliminar"
          onChange={handleEliminar}
          value={eliminar}
        ></input>
        <br />
        <button onClick={handleChange}>Enviar</button>
      </form>
      <br />
    </div>
  );
}```

Any help would be greatly appreciated. Thanks in advance.