This JSX tag requires 'React' to be in scope, but it could not be found.ts(2874)

[dbzx10299]

Below I have listed the file structure I have in my project as well as the Vite config file, if I create a component in the /src dir with a .tsx extension, the code does not have any red squiggly lines, but if I put the same code in the /lib dir, I get a red line that states: This JSX tag requires 'React' to be in scope, but it could not be found.ts(2874).

index.tsx

export default function Grid() {
  return (
    <div>I am a grid</div>
//   ^^^^  This JSX tag requires 'React' to be in scope, but it could not be found.ts(2874)
// This error only happens if this component is in the /lib folder, but it does not occur in the /src folder
  )
}

.
└── lib/
    ├── components/
    │   └── Button/
    │       └── index.tsx
    └── main.ts

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { libInjectCss } from 'vite-plugin-lib-inject-css'
import { resolve } from 'path'
import { globSync } from 'glob'
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import dts from 'vite-plugin-dts'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    libInjectCss(),
    dts({ tsconfigPath: resolve(__dirname, "tsconfig.lib.json") })
  ],
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
  },
  build: {
    copyPublicDir: false,
    lib: {
      entry: resolve(__dirname, 'lib/main.ts'),
      formats: ['es']
    },
    rollupOptions: {
      external: ['vue'],
      input: Object.fromEntries(
        globSync('lib/**/*.{ts,tsx}', {
          ignore: ['lib/**/*.d.ts']
        }).map(file => [
          path.relative(
            'lib',
            file.slice(0, file.length - path.extname(file).length)
          ),
          fileURLToPath(new URL(file, import.meta.url))
        ])
      ),
      output: {
        assetFileNames: 'assets/[name][extname]',
        entryFileNames: '[name].js'
      }
    }
  }
})