Can't resolve image while using it via css background image? Not being able to use anything from assets in Ionic?

I’m trying to load an image in one of my components and for this, I created one sample app using the following command:

 ionic start yp-patient-app sidemenu --type=react --capacitor

After completion, I moved to one of the component and tried to use a pre-existing image via:

.container {
    background-image: url("./assets/shapes.svg");
}

But it failed with an error and I’m not being able to use that file, I tried all the other combinations related to relative path like ../assets or shapes.svg, /assets/shapes:

[react-scripts] Error: Can't resolve './assets/shapes.svg' in 'C:\Users\Ashish Bairwa\Desktop\temp\yp-patient-app\src\pages'

enter image description here

Here is my package.json preview:

{
  "name": "yp-patient-app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@capacitor/app": "1.0.7",
    "@capacitor/core": "3.3.3",
    "@capacitor/haptics": "1.1.3",
    "@capacitor/keyboard": "1.2.0",
    "@capacitor/status-bar": "1.0.6",
    "@ionic/react": "^6.0.0",
    "@ionic/react-router": "^6.0.0",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.6.3",
    "@types/jest": "^26.0.20",
    "@types/node": "^12.19.15",
    "@types/react": "^16.14.3",
    "@types/react-dom": "^16.9.10",
    "@types/react-router": "^5.1.11",
    "@types/react-router-dom": "^5.1.7",
    "ionicons": "^5.4.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.2",
    "typescript": "^4.1.3",
    "web-vitals": "^0.2.4",
    "workbox-background-sync": "^5.1.4",
    "workbox-broadcast-update": "^5.1.4",
    "workbox-cacheable-response": "^5.1.4",
    "workbox-core": "^5.1.4",
    "workbox-expiration": "^5.1.4",
    "workbox-google-analytics": "^5.1.4",
    "workbox-navigation-preload": "^5.1.4",
    "workbox-precaching": "^5.1.4",
    "workbox-range-requests": "^5.1.4",
    "workbox-routing": "^5.1.4",
    "workbox-strategies": "^5.1.4",
    "workbox-streams": "^5.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
    "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"
    ]
  },
  "devDependencies": {
    "@capacitor/cli": "3.3.3"
  },
  "description": "An Ionic project"
}

Might be worth seeing if the problem persists with no spaces in any directory names in the relevant path.

I tried it on the directory where I had no spaces, still not working

This problem seems to be related to react-scripts version which comes with ionic. Latest version no longer looks into public folder for assets, rather expects you to make a folder outside the public. If you really want to pick assets from public then just revert react scripts to 3.4.1