Meu live server não mostra o componente titulo. No que estou errando?
<!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.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.24.4/babel.min.js" integrity="sha512-YpL+cyxeD6yi05xXUGpdeHyf7F4LFthEdJvNFp0kGSTssHu0M7kWxVQTZ6jD7s5z5cbibg6JpleJrO2wOKd0YA==" 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">
Boa-vindas! Faça seu login.
</h2>
)
}
ReactDom.createRoot(document.getElementById("root")).render(<Titulo />)
</script>
</body>
</html>
