How do I use doctype and html tags in a react component?

I'm trying to do SSR with Bun and I want to have a Layout component that I use as a base for my pages.

Here is my Index page component:

import { useState } from "react";
import Layout from "../components/Layout";

export const render = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <Layout>
      <h1>index</h1>
      <p>the count is {count}</p>
      <button onClick={increment}>increment</button>
    </Layout>
  );
};

Here is my Layout component:

import type { ReactNode } from "react"

export default (props: { children : ReactNode }) => {
    return (
        <>
            <!doctype html>
            <html>
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <link href="./output.css" rel="stylesheet">
                </head>
                <body>
                    {props.children}
                </body>
            </html>
        </>
    )
}

When I run the server and try and visit the page, I get the following error:

BuildError: Expected identifier but found "!" In app/components/Layout.tsx:6:14

            <!doctype html>

BuildError: Expected ">" but found "" In app/components/Layout.tsx:6:15

            <!doctype html>

BuildError: Syntax Error!! In app/components/Layout.tsx:19:12

</>

VSCode also gives me this linting error:

JSX fragment has no corresponding closing tag.

How can I have doctype and html tags in my Layout component?

Solution

I figured out that renderToReadableStream will auto-add the doctype to the component, so I can just use my original example without the doctype tag and it works great.