How can I solve the css and JavaScript errors in React deploy?

Question

jsx works well on the page. However, when there is a code like below, 'hello' cannot be printed on the console.

useEffect(()=>{
  console.log("hello");
},[])

The styled-component is also not applied. (This works well in the local environment before deployment.) Is it a setup error?

(It was developed in a JavaScript environment.)

//package.json

    "@craco/craco": "^6.4.3",
    "@reduxjs/toolkit": "^1.8.1",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.0.1",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.26.1",
    "lodash": "^4.17.21",
    "moment": "^2.29.3",
    "qs": "^6.10.3",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-redux": "^7.2.8",
    "react-router": "^6.3.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "react-select": "^5.3.2",
    "react-slick": "^0.29.0",
    "redux-persist": "^6.0.0",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.3.5",
    "styled-reset": "^4.3.4",
    "swr": "^1.3.0",
    "web-vitals": "^2.1.4"

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@styles/*": ["./src/style"],
      "@redux/*": ["./src/redux"],
      "@components/*": ["./src/components"],
      "@pages/*": ["./src/pages"],
      "@routes/*": ["./src/routes"]
    }
  }
}

// craco-alias
const CracoAlias = require("craco-alias");

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "jsconfig",
        jsConfigPath: "jsconfig.paths.json",
      },
    },
  ],
};