on:click event not firing from within @error.svelte

I have a SvelteKit app with an @error.svelte page at the root of the /routes folder. Inside of this page, I have two buttons. One is in the header and the other one trigger's a page event when clicked on. For some reason, neither of these buttons are triggering the on:click handler when clicked on.

Here is the simplified code

<script>    import Button, { Label } from '@smui/button';    function handleClick() { // Neither the smui button or the native html button run this function        console.log('click');    }</script><div class="page-container"><Button        variant="unelevated"        on:click={handleClick}> <!--Nothing happens when clicked!--><Label>Go Back To Homepage</Label></Button> <button on:click={handleClick}>Click me</button> <!--Nothing happens when clicked!--></div>

I have tried the following troubleshooting steps:

1. Adding console logs to the function inside on:click to see if it's being called: The function isn't being called at all.
2. My buttons are Svelte Material UI buttons. To ensure the error didn't come from this library, I created a test native html button with an on:click handler. This one didn't call the click function either.
3. Checked the browser console. I don't see any errors.
4. I looked at this post Thought that there might be an issue with both buttons being in @error.svelte located at the root of my /routes folder but I couldn't understand the answer that well.Assuming this answer is true, the problem would have been fixed in the native HTML button. But it wasn't.

Any clue?