Não esta sendo exibido nada, somente a imagem de fundo | React: construíndo componentes com JSX

O meu simplesmente não exibe nada. Devo fazer algum pip install ?

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./styles/styles.css" />
    <link rel="stylesheet" href="./styles/PaginaDeLogin.css" />
    <link rel="stylesheet" href="./styles/CampoDeDigitacao.css" />
    <title>Login | CodeConnect</title>
</head>

<body>
    <div id="root"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/cjs/react.production.min.js" integrity="sha512-wGcZXj/wGy0PrK1PUJpABds0CNVMN5FOvx6RJ4VFX6d1cP21LHdn32pqqHZxnlAyTY3MN6agJQnV/RkWiOTZzw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/cjs/react-dom.production.min.js" integrity="sha512-JNrK0svSdzmupRoUCGrnD5Im9ybaQ/dtwjbEE8top7nLk6qlV6jatbUinWJf1B+//gADpfBVm8nF1eyreAJX3w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.24.6/babel.min.js" integrity="sha512-os/eJfiEDJeFFDqQb5IUxUBIb1QBNE3vpk/6b3/09h/7etB96cuuaLXo6VuVr+WwXgSD2NbErw80FYLi/hSy6Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="text/babel">
        function Titulo(){
            return (
                <h1 className="form__titulo">Login</h1>
            )
        }

        function Subtitulo(){
            return (
                <h2 className="form__texto">Boas-vindas! Faça seu login.</h2>
            )
        }

        function PaginaLogin(){
            return (
                <div className="container-login">
                    <img src="./img/imagem-login.png" alt="">
                    <section>
                        <form action="">    
                            <Titulo />
                            <Subtitulo />
                        </form>
                    </section>
                </div>
            )
        }
        RectDOM.createRoot(document.getElementById("root")).render(<PaginaLogin/>)
    </script>
</body>

</html>

Oi Lucas, passei pelo mesmo problema, a solução que encontrei aqui no forum foi pra ao inves de usar os códigos do cdnjs, você copia os códigos na descrição do vídeo la no primeiro módulo quando ela ta importando, pra adiantar, ja estou te mandando eles aqui:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"
        integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"
        integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.3/babel.min.js"
        integrity="sha512-MIXku7j6pJ0hqd2T4WXZMGerp3BU9B91rfLRDp/McDBNNdnwTD+yLJaz9AHcYXT6k16dYTkG9S2KRPGxaBIfBQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

usa esses 3 que vai funcionar.