React Router 6: Nested routes not working, possibly webpack config

Question

Nested routes aren't working when trying to build a launcher page of location /, and then an init page with a URL style of setup/init, and not sure why. React Router v6.

When I go to navigate to the embedded url /setup/init, the bundle changes where it's loading from. It goes from /bundle.js to /setup/bundle.js, which is obviously a 404.

index.tsx: In comments are all the variations attempted

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Launcher />} />
     <Route path="/setup/init" element={<InitContainer />} />
     <Route path="*" element={<h2>Page Not Found</h2>} />
   </Routes>
   {/* <Routes>
     <Route path="/" element={<Launcher />}>
     <Route path="setup/init" element={<InitContainer />} />
     <Route path="*" element={<h2>Page Not Found</h2>} />
   </Routes> */}
   {/* <Routes>
     <Route path="/" element={<Launcher />}>
       <Route path="setup">
         <Route index element={<InitContainer />} />
         <Route path="init" element={<InitContainer />} />
       </Route>
     </Route>
     <Route path="*" element={<h2>Page Not Found</h2>} />
   </Routes> */}
</BrowserRouter>

webpack.config.js: Tried multiple webpack configs as well based on other stack answers

module.exports = {
  entry: './src/client/index.tsx',
  output: {
    // publicPath: '/' <--- This lead to all containers being the launcher container
    path: path.join(__dirname, '/dist/'),
    chunkFilename: '[name].[contenthash].js',
    filename: '[name].[contenthash].js',
    sourceMapFilename: '[name].[contenthash].js.map'
  },
  ...
  devServer: {
    port: 3001,
    open: true,
    historyApiFallback: true
  }
  ...
}

I also attempted adding the Outlet to the Launcher or InitContainer, and it didn't work. What am I missing?