Cannot pass array object from map function as argument javascript

I am trying to figure out why I cannot pass array object from map function as argument to function createModal(student) that is called onclick:
The error is caused by the parameter because when I tried function createModal() it worked fine.

const allWorkshops = await fetch("/api/workshops/detail");
const data = await allWorkshops.json();
result.innerHTML = "";
counter = 0;

data.forEach((workshop) => {
  ...
  ${workshop.students.map(student =>
     `<li class="list-group-item">
        <a data-bs-toggle="modal" data-bs-target="#studentModal" type="button" onclick="createModal(${student})">${student.first_name} ${student.last_name}</a>
      </li>`
  ).join("")}
  ...
});

I have seen this (and this) question and tried changing the code as following but it did not work either:

...
${workshop.students.map(function(student) {
   var studentCopy = JSON.parse(JSON.stringify(student));
   return `<li class="list-group-item">
             <a data-bs-toggle="modal" data-bs-target="#studentModal" type="button" onclick="createModal(${studentCopy})">${student.first_name} ${student.last_name}</a>
           </li>`
}).join("")}
...

Unfortunately I don’t know the exact error because the only thing I see in inspect in Chrome is this. Which is at the beggining of index file and does not help me.

Uncaught SyntaxError: Unexpected identifier (at (index):1:21)