weird behavior: a button declared in TSX with onClick does not have onClick in the final html?

export const FORM_URL = "https://forms.gle/..."

export default function App() {
  return (
    <Router
      root={(props) => (
        <>
          <nav class={"w-full bg-opacity-10 bg-gray-400 flex flex-row justify-between text-lg"}>
            <div/>
            <Row>
              <button class={"p-4 font-semibold"} onClick={() => window.open(FORM_URL, "_blank")?.focus()}>Sign up for pre-release</button>
            </Row>
          </nav>
          <Suspense>{props.children}</Suspense>
        </>
      )}
    >
      <FileRoutes/>
    </Router>
  );
}

export const FORM_URL = "https://forms.gle/..."

export default function App() {
  return (
    <Router
      root={(props) => (
        <>
          <nav class={"w-full bg-opacity-10 bg-gray-400 flex flex-row justify-between text-lg"}>
            <div/>
            <Row>
              <button class={"p-4 font-semibold"} onClick={() => window.open(FORM_URL, "_blank")?.focus()}>Sign up for pre-release</button>
            </Row>
          </nav>
          <Suspense>{props.children}</Suspense>
        </>
      )}
    >
      <FileRoutes/>
    </Router>
  );
}