NEXT.JS: Fetching API on button click

Next.js version: 13.4

I have a component which returns a . I also have a function like
async function getDataFromApi(name) {
const res = fetch(http://dummy.api?name=${name},
{
headers: {
Authorization: process.env.API_KEY,
},
}
)
const data = await res.json()
return data
}

How can I run this function whenever the button gets clicked? I tried using both client (cant because of the process.env.API_KEY) and server (cant because of the onClick() on the button and the full code uses states as well) components.
Also the API key should remain a 'secret', because it wouldn't be great if my key gets leaked.

EDIT: couldn't use the the code markdown in the post, because it gave an error