Why are the pages on my Vite+React multi-page app defaulting to the homepage?

My React app should have 2 main webpages: localhost:3001/ and localhost:3001/tags/. The issue is that loading localhost:3001/tags/ will display the contents at localhost:3001/. I can also tell that /tags/ isn’t loading properly because I set the page title for it to “Tags” but instead, “Homepage” shows as the page title.

The file structure:

.env
index.html
package.json
vite.config.ts
etc.
src/
  | App.tsx
  | main.tsx
  | tags/
    | index.html
    | tags.tsx

The main index.html has the script tag with src="/src/main.tsx". The src/tags/index.html is the same as the main index.html except with <title>Tags</title> and script tag with src="./tags.tsx".

tags.tsx has a simple “Hello world” inside the createRoot().

vite.config.ts:

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3001
  },
  build: {
    outDir: 'dist',
    emptyOutDir: true,
    rollupOptions: {
      input: {
        main: 'index.html',
        tags: 'src/tags/index.html'
      }
    }
  }
 })