Can't pass object as argument to the onclick method within a template literal

As the title says, I have some JSON data that is stored within a variable "busquedaFiltrada" and when I attempt to pass one of its objects as an argument I get errors. I cannot for the life of me figure this one out, I've spent hours on it and i'm still confused.

btnBusqueda.addEventListener("click", () => {
  let inputBusquedaActual = document
    .getElementById("inputBuscar")
    .value.toLowerCase();

  let htmlToAppend = "";

  busquedaFiltrada = arrayPelis.filter((pelicula) => {
    return (
      pelicula.title.toLowerCase().includes(inputBusquedaActual) ||
      pelicula.tagline.toLowerCase().includes(inputBusquedaActual) ||
      pelicula.overview.toLowerCase().includes(inputBusquedaActual)
    );
  });

  for (let i = 0; i < busquedaFiltrada.length; i++) {
    let peli = busquedaFiltrada[i];
    htmlToAppend += `
        <li class="list-group-item" data-bs-toggle="offcanvas" onclick="displayOffCanvas(${peli})" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop" >
      <p class="titulo">${peli.title}</p>
      <p class="descripcion">${peli.tagline}</p>
        </li>
        `;
  }

  listado.innerHTML = htmlToAppend;
});

"Uncaught SyntaxError: Unexpected identifier 'Object' (at index.html:1:23) " is the error if I attempt to pass it as an object, but if I try to stringify it beforehand then I get "Uncaught SyntaxError: Unexpected end of input (at index.html:1:16) "

Just for the record, displayOffCanvas(arg) just does a console.log of the arg as I'm still trying to figure this one out.