I completed a mini connect-4 game based on the Tic-tac-toe tutorial on Reactjs official website Code:https://codepen.io/bunansia/pen/KKXXKje?editors=1010 I copied the html,css plus JS file and tried to run on VCS but failed I have installed node.js, @babel/cli @babel/core @babel/preset-env @babel/preset-react have been installed, and this is how my package.json file looks like

{
  "name": "react-connect4",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "babel src/index.js --out-file public/scripts/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.16.0",
    "@babel/core": "^7.16.5",
    "@babel/preset-env": "^7.16.5",
    "@babel/preset-react": "^7.16.5"
  },
  "devDependencies": {
    "@babel/plugin-transform-react-jsx": "^7.16.5"
  },
  "description": "",
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "throwIfNamespace": false, // defaults to true
        "runtime": "automatic", // defaults to classic
        "importSource": "custom-jsx-library" // defaults to react
      }
    ]
  ]
}

I have also created .babelrc file instructing where to find the preset

{
    "presets": ["@babel/preset-env","@babel/preset-react"]
}

Have tried multiple ways like converting original JS file to babel version

"scripts": {
    "build": "babel src/index.js --out-file public/scripts/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

And I put them in the folder named "public", while js && css files are in the folder named "script" But when I run it on live-server everything is blank What can be the configuration issues?

I have added 2 lines in html file since I am using these two external scripts also

<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>