Hitting breakpoints with Vite Preview

Question

I'm using Vite to build a React application. Currently, I just have the default counter application when I use the React template with Vite. If I run npm run dev, then launch VS Codes debug mode with chrome, I'm able to put a breakpoint at the [count, setCount] line for the following code:

    import { useState } from 'react'
    import './App.css'
    
    function App() {
      const [count, setCount] = useState(0)
    
      return (
        <>
          <h1>component-a</h1>
        </>
      )
    }
    
    export default App

When I select "Step Over" I can see the "count" variable set to 0 in the variables tab. However, if I try to use npm run build to create a minified version of this; if I then run npm run preview and attempt to launch VS Codes chrome debug. I no longer have access to the break points. If I try to put a break point in the same place, I get an error that says "unbound break point" when I hover over the spot where the break point should be. I've enabled source maps in my vite.config.js file and attempted to set a value for "sourceMapPathOverrides" in launch.json Here are the following files:

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    "sourcemap": true
  },
  css: {
    devSourcemap: true,
  },
})

launch.json

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
    {
  "name": "React App - Package A",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:4173", // Update with the appropriate URL
  "webRoot": "${workspaceFolder}/packages/component-a",
  "sourceMapPathOverrides": {
    "webpack:///./src/*": "${webRoot}/src/*"
  }
},
]
}

I do adjust the url value in launch.json from port 5173 to 4173 when switching to npm run preview.

Also, if I hover over the unbound breakpoint error, and select "trouble shoot launch configuration" I'm directed to the following message in debug diagnostics:

✅ This breakpoint was initially set in:

C:\Users\user.name\monorepo-react-vite\packages\component-a\src\App.jsx line 5 column 1

❓ We couldn't find a corresponding source location, and didn't find any source with the name App.jsx.

How did you expect this file to be loaded? (If you have a compilation step, you should pick 'sourcemap')
Loaded in directlyBe parsed from a sourcemap
Here's some hints that might help you:
Make sure your build tool is set up to create sourcemaps.

Ultimately, this is supposed to be part of a monorepo and I'd eventually like to build to packages, publish them and be able to use them in other applications with full debug functionality. But for now, I'm having trouble getting full debug functionality when running a single package; particularly with getting break points to work.