Checking if object already exists in another array before adding it

I have an array of objects (opciones) and another array (visibles) where im trying to add the objects that are supposed to show up.

 function next(ev, next) {
    ev.preventDefault();
    setToggle(next.siguiente);
    let element = document.getElementById(next.siguiente);
    opciones.map(
      (opcion) => opcion.id === next.siguiente && visibles.push(opcion)
    );
  }

Next is the current object i’m passing onClick/submit.
SetToggle: i set visibility of the component i want to show.
next.siguiente – the next component ID that has to show up after this function is finished.
opciones – my initial array of objects
**visibles **- the array where i add the selected objects
and in my opciones.map function i’m trying to detect if the next component ID exists in the opciones array i want to push it into visibles array.
It works but im obviously getting duplicates the way i’m doing it right now.

This is my opciones object for better understanding:

  const opciones = [
    {
      id: "TAB_inicio",
      texto: "Inicio",
      visibilidad: "",
      siguiente: "TAB_incluido",
      descripcionTitulo: "Bienvenido al programa de carga de Viajes",
      descripcion: "Selecciona lo que quieras hacer",
      icon: <FaCheckCircle />,
      next: next,
      contenido: <Inicio />,
      botonSiguiente: "Nuevo Viaje",
    },
    {
      id: "TAB_descripcion",
      texto: "Descripción",
      visibilidad: "hidden",
      siguiente: "TAB_prueba",
      descripcionTitulo: "Descripcion",
      descripcion: "detalles importantes",
      icon: <FaBookOpen />,
      next: next,
      contenido: <Descripcion />,
      botonSiguiente: "Siguiente",
    },
    {
      id: "TAB_incluido",
      texto: "Incluido / no",
      visibilidad: "hidden",
      siguiente: "TAB_descripcion",
      descripcionTitulo: "Incluido/ No incluido",
      descripcion:
        "Si el servicio no está seleccionado, el cliente lo verá como no incluido.",
      icon: <FaCheckDouble />,
      next: next,
      contenido: <Incluido />,
      botonSiguiente: "Siguiente",
    }
  ];

So pretty much siguiente would be the ID of the next object / component i want to display.
How would i be able to check if visibles already has the added object before i add it again?
i tried something like:

 function next(ev, next) {
    ev.preventDefault();
    setToggle(next.siguiente);
    let element = document.getElementById(next.siguiente);
    if (visibles.includes(next)) {
      console.log("already exists");
    } else {
      opciones.map(
        (opcion) => opcion.id === next.siguiente && visibles.push(opcion)
      );
    }
  }

but it doesn’t really work. I’m getting duplicated keys when displaying the list and it keeps adding to the array.
Any help or recommendation in general to improve this would be appreciated! Thank you in advance.