Breakpoints showing "Unbound breakpoint" in VS Code when debugging React app

I am trying to debug a React application in VS Code, but the breakpoints are not binding correctly.

When I set a breakpoint in my source file, VS Code shows "Unbound breakpoint" and displays the following message:

We couldn't find a corresponding source location, and didn't find any source with the name Api_Call.js.

Project Details:

• Framework: React
• Start command: npm start
• File where breakpoint is set: src/CONNECTION/Api_Call.js
• OS: Windows
• Editor: VS Code

Current launch.json configuration:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },        
  ]
}

<img width="792" height="188" alt="Image" src="https://github.com/user-attachments/assets/2b98fb0d-b629-49cb-8f40-6c90ad80fd0f" />

Issue:
VS Code cannot map the running code in the browser to the local source file, and the breakpoint remains unbound.

Steps to Reproduce:

1. Start the React application using npm start.
2. Launch the debugger in VS Code.
3. Set a breakpoint in Api_Call.js.
4. Breakpoint appears hollow and shows "Unbound breakpoint".

Expected Behavior:
Breakpoints should bind correctly and pause execution when the code is hit.

Actual Behavior:
Breakpoints remain unbound and the debugger does not stop.

Start with the launch.json configuration and the React app entry point run by npm start, then reproduce the unbound breakpoint in src/CONNECTION/Api_Call.js using the Launch Chrome configuration. Compare the browser's loaded source to the local file and determine why Api_Call.js cannot be mapped; done means the breakpoint binds and pauses when execution reaches it.