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?