I built a react widget with parcel bundler. The sites and it's JavaScript functionality works, but the CSS doesn't load with it, so it looks disfigured. I've tried several methods, but the CSS won't work.

*Here is my package Json

{
  "name": "9jakids-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.4.0",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "node-sass": "^6.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-modal": "^3.14.3",
    "react-redux": "^7.2.5",
    "react-responsive-modal": "^6.1.0",
    "react-scripts": "4.0.3",
    "redux": "^4.1.1",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "eject": "react-scripts eject",
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "build:widget": "parcel build src/index.js --no-source-maps -d widget"
  },
  "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"
    ]
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.5"
  }
}

I also have a craco.config.js file but it's empty.

This is the site where it's imbedded.

This is the embeddable link.

     <div id="lukman-test"></div>

    <link href="https://test-royal.000webhostapp.com/widget/index.css" rel="stylesheet" />
    <script src="https://test-royal.000webhostapp.com/widget/index.js"></script>