Unable to set a breakpoint in code in Chrome/Firefox

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#issues).

### Prerequisites

- [X] I'm using the latest version of Docusaurus.
- [X] I have tried the `npm run clear` or `yarn clear` command.
- [X] I have read the console error message carefully (if applicable).
- [X] I have tried `rm -rf node_modules yarn.lock package-lock.json` and re-installing packages.
- [X] I have tried creating a repro with https://new.docusaurus.io.

### Description

I am unable to set breakpoint in tsx files in neither Chrome or Firefox.

The issue reproduces in a fresh Docusaurus install, both locally and in playground. You can see it in the links:

https://codesandbox.io/p/devbox/affectionate-beaver-qdeo7?privacy=public
https://qdeo7-3000.csb.app/

The lines of the component are grey and I am unable to set a breakpoint. If I try to use the "debugger" command, I get the minified version. Image below.


### Reproducible demo

https://codesandbox.io/p/devbox/affectionate-beaver-qdeo7?privacy=public

### Steps to reproduce

1. npm start
2. Navigate to a component, e.g. `src/pages/index.tsx`
3. Try to set a breakpoint

### Expected behavior

Breakdown should be set

### Actual behavior

Breakdown should is not set

### Your environment

- Docusaurus version used: 3.3.2
- Environment name and version: Reproduces in latest Chrome/Arc and Firefox
- Operating system and version (e.g. Ubuntu 20.04.2 LTS): MacOS 14.4.1 (23E224)

### Self-service

- [ ] I'd be willing to fix this bug myself.