I have an extremely simple component as my root page:

"use client";

export default function Page() {

    return (
        <main className={"flex min-h-screen flex-col items-center p-24 gap-12"} onClick={() => console.log("Hello World!")}>
            <h1 className={"text-xl"}>Hello!</h1>
        </main>
    )
}

The main Element obviously takes up the entire page, which can be seen in the dev tools. The onClick is never triggering. I also tried adding inputs with onChange listeners and everything, and the events never trigger.

I have tried adding useStates, console.logs, restarting the application multiple times but I can't get it to work. What am I doing wrong?