Why does react does not work here

<script src="index.js" ></script>  

Note: above code is located at the main html

heres the react.js file

import React from 'react' import ReactDOM from 'react-dom'

const page = (   
   <div>
    <ul>
    <li>Anime Title</li> 
    <li>Genre</li>    
    <li>Rating</li>
    <li>Status</li>
    </ul>    
</div>
)



ReactDOM.render(page, document.getElementById("root"))

Whenever i tried to run this it says "cannot use import statement outside a module" Do i did wrong when installing react-js?

by the way heres the package.json

{
"name": "try", 
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
  "web-vitals": "^2.1.4"

   },
   "scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
  },
  "eslintConfig": {
  "extends": [
  "react-app",
  "react-app/jest"
 ]
 },
"browserslist": {
"production": [
  ">0.2%",
  "not dead",
  "not op_mini all"
 ],
 "development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
]
}
}