how to handle click event inside html from js and external js function

i have external file for templates i want to adding the templates in it but when i adding the onclick functoin its show error massage the handleClickCard not defind

import { handleClickCard } from "../../../script.mjs";

function templateCard(item, condition, idUpdate, id, title, tags) {
  const card = `
<div class="card" >
    <div class="card-header">                 
        <span onclick="showuserinfo('${encodeURIComponent(JSON.stringify(item),
    )}')" style="cursor: pointer;"><strong>${item.author.username
    }</strong>
        </span>
        ${condition
      ? `<button class="btn btn-danger mx-2" style="float: right;" onclick={handleclickdeletebutton('${idUpdate}')}>delete</button>`
      : ""
    }
        ${condition ? `<button class="btn btn-primary" style="float: right;" onclick="handleclickeditbutton('${encodeURIComponent(JSON.stringify(item),)}')">edit</button>`
      : ""}
    </div>

     <!-- the problem in here and there is another problem in the file but its the same solution for this problem -->
    <div class="card-body" onclick="handleClickCard(${id})">

        </div>
    </div>
</div>
  `;
  return card;
}
export { templateCard };

and handleClickCard in another file i export it

export const handleClickCard = () => {
    console.log("handle click")
}

and the error massage that show :

Uncaught ReferenceError: handleClickCard is not defined

so how to perform the function from the external templates file ????