Type Errors if Select.Option are rendered both statically and dynamically

[KMathisGit]

I am trying to create my own wrapper component for <Select> to make it more re-usable in my own app.

// imports ...

export default function AppSelect(props: IAppSelectProps) {
  return (
    <div>
      {props.label && <label>{props.label}</label>}
      <Select {...props.selectProps}>
        <Select.Option value="" disabled>Select Item</Select.Option>
        {props.options.map((o) => (
          <Select.Option key={o.label} value={o.value} disabled={o.disabled}>
            {o.label}
          </Select.Option>
        ))}
      </Select>
      {props.errorMsg && <span className="text-error">{props.errorMsg}</span>}
    </div>
  );
}

This does work functionally but I am getting type errors on the dynamic mapping part of my options.

The type error I am getting is:

Type 'Element[]' is not assignable to type 'ReactElement<SelectOptionProps, string | JSXElementConstructor<any>> | (string & ReactElement<SelectOptionProps, string | JSXElementConstructor<...>>)'.
Type 'Element[]' is not assignable to type 'string & ReactElement<SelectOptionProps, string | JSXElementConstructor<any>>'.
Type 'Element[]' is not assignable to type 'string'.

If I remove my 1 static Select.Option that I am using as a placeholder value than the type error goes away... I would like to keep the placeholder value and fix this type error but I am having trouble.

[victorcarvalhosp]

Getting the same error here. Did you find some workaround that doesn't involve setting the type as any?

<Select
      value={colorScheme}
      onChange={(event) => setColorScheme(event.target.value)}
    >
      <Select.Option value={"dark"} disabled>
        Pick your favorite Simpson
      </Select.Option>
      {
        Themes.map((theme) => (
          <Select.Option key={theme} value={theme}>
            {theme}
          </Select.Option>
        )) as any
      }
    </Select>