I havent done anything but created the React template and I am already getting the white screen. I have not changed a thing. I dont know what is going on .. Please help me out so I can get started on my project. Here is the code that was created on startup:

App.jsx

import {
  useState
} from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'


function App() {
  const [count, setCount] = useState(0)

  return ( <
    >
    <
    div >
    <
    a href = "https://vitejs.dev"
    target = "_blank" >
    <
    img src = {
      viteLogo
    }
    className = "logo"
    alt = "Vite logo" / >
    <
    /a> <
    a href = "https://react.dev"
    target = "_blank" >
    <
    img src = {
      reactLogo
    }
    className = "logo react"
    alt = "React logo" / >
    <
    /a> <
    /div> <
    h1 > Vite + React < /h1> <
    div className = "card" >
    <
    button onClick = {
      () => setCount((count) => count + 1)
    } >
    count is {
      count
    } <
    /button> <
    p >
    Edit < code > src / App.jsx < /code> and save to test HMR <
    /p> <
    /div> <
    p className = "read-the-docs" >
    Click on the Vite and React logos to learn more <
    /p> <
    />
  )
}

export default App

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render( <
  React.StrictMode >
  <
  App / >
  <
  /React.StrictMode>,
)

index.html

< !doctype html >
  <
  html lang = "en" >
  <
  head >
  <
  meta charset = "UTF-8" / >
  <
  link rel = "icon"
type = "image/svg+xml"
href = "/vite.svg" / >
  <
  meta name = "viewport"
content = "width=device-width, initial-scale=1.0" / >
  <
  title > Vite + React < /title> <
  /head> <
  body >
  <
  div id = "root" > < /div> <
  script type = "module"
src = "/src/main.jsx" > < /script> <
  /body> <
  /html>

package.json

{
  "name": "my-firstt-react-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.55.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "vite": "^5.0.8"
  }
}

Let me know how I can make the appropriate changes to make this work, please.

1