How do I pass a variable as a react component while bypassing conditional render?

Question

import { ReactComponent as GreenIcon } from '../assets/green.svg'
import { ReactComponent as YellowIcon } from '../assets/yellow.svg'
import { ReactComponent as RedIcon } from '../assets/red.svg'

const GreenIconMemoized = memo(GreenIcon)
const YellowIconMemoized = memo(YellowIcon)
const RedIconMemoized = memo(RedIcon)

const STATUSES = ['ready', 'delay', 'stop']
const icons = new Map([
  ['ready', GreenIconMemoized],
  ['delay', YellowIconMemoized],
  ['stop', RedIconMemoized]
])

const [sampleStatus, setSampleStatu] = useObserver(() => [
  sampleSTORE.sampleStatus,
  sampleSTORE.setSampleStatus
])

const sampleArray: ComponentType[] = useMemo(() => {
  return STATUSES.map((status: string) => {
    const Icon = icons.get(status)
    return {
      id: status,
      label: status,
      isSelected: status === sampleStatus,
      onSelect: (): void => {
        setSampleStatus(status)
      },
      leftComponent: Icon ? <Icon /> : undefined
    }
  })
}, [sampleStatus])

In the code above, what is the best way to pass the Icon value as a react component without the need of a conditional render? Both STATUSES and icons are hard coded into the system, and therefore are not really variable - the else condition will never be reached. But if I attempt to pass for example:

...
   leftComponent: <Icon />
...

I am given the error "JSX element type 'Icon' does not have any construct or call signatures."