'SelectInput' JSX type error

When trying to re-use the

component in my own custom admin component, I get this type error:

'SelectInput' cannot be used as a JSX component.
Its return type 'ReactElement<any, any>' is not a valid JSX element.
Type 'ReactElement<any, any>' is missing the following properties from type 'Element': tag, attrs, statets(2786)

From some googling, I think this may have something to do with conflicting React versions, or else some kind of issue with TypeScript not using the correct React version.

However, I only have one version of React present in my project and it's

, the same as Payload CMS.

I also added the following to my package.json which did not seem to help:

  "overrides": {
    "react": "^18.2.0"
  },
  "resolutions": {
    "react": "^18.2.0"
  }

My tsconfig is as follows:

{
  "compilerOptions": {
      "allowJs": true,
      "baseUrl": ".",
      "esModuleInterop": true,
      "lib": ["es2019", "es2020.bigint", "es2020.string", "es2020.symbol.wellknown"],
      "jsx": "react",
      "module": "commonjs",
      "moduleResolution": "node",
      "noEmitOnError": true,
      "outDir": "./dist",
      "paths": {
        "bundles/*": ["bundles/*"],
        "lib/*": ["lib/*"],
        "combat/*": ["bundles/myelin-turn-combat/lib/*"],
        "types/*": ["types/*"],
        "payload/generated-types": ["./bundles/myelin-cms/payload-types.ts"],
      },
      "pretty": true,
      "resolveJsonModule": true,
      "skipLibCheck": true,
      "sourceMap": true,
      "target": "es2019",
      "typeRoots": [
        "./node_modules/@types"
      ]
  },

  "include": [
    "bundles",
    "lib",
    "node_modules/ranvier",
    "config.json",
    "server.ts",
    "tests", 
    "payload.config.ts"
  ],

  "//": "The myelinPanel is built by Vite and has its own TSConfig",
  "exclude": [
    "bundles/myelin-panel/src",
    "bundles/myelin-panel/dist"
  ],

  "ts-node": {
    "require": ["tsconfig-paths/register"],
    "swc": true
  }
}

(note "jsx": "react")

And finally, the component where the error crops up is as follows (I didn't implement any custom behavior yet due to running into this issue right away):

const CustomSelect: React.FC<SelectInputProps> = (props) => {
  // const { value, setValue } = useField<SelectInputProps>(props);
  return (
    <SelectInput
      {...props}
    />
  );
}

Something else I can add: I changed the file with the component from

to

and everything compiles fine and the Select field works. So it's 100% a types issue.