How can I use react´s "TablerIcons" and svg´s "IconDefinition" types in a union?

Question

So I´m using the mantine library in nextJS with Typescript and would like to use some svg-icons in the Navbar instead of just reacts TablerIcons.

Imports:

import {
    Icon as TablerIcon,
    Home2,
    Gauge,
    ...
} from "tabler-icons-react"
import {
    IconDefinition,
    faBitcoin,
    faGithub,
    faLinkedin,
    faUniregistry,
    ...
} from "@fortawesome/free-brands-svg-icons"

I would like to go from this:

icon: TablerIcon

in:

interface NavbarLinkProps {
    icon: TablerIcon 
    label: string
    active?: boolean
    onClick?(): void
}

function NavbarLink({ icon: Icon, label, active, onClick }: NavbarLinkProps) {
    const { classes, cx } = useStyles()
    return (
        <Tooltip
            label={label}
            position="right"
            withArrow
            transitionDuration={0}
        >
            <UnstyledButton
                onClick={onClick}
                className={cx(classes.link, { [classes.active]: active })}
            >
                <Icon />
            </UnstyledButton>
        </Tooltip>
    )
}

To allow both types as icons like this:

icon: TablerIcon | IconDefinition

type  NavbarLinkProps = {
    icon: TablerIcon | IconDefinition
    label: string
    active?: boolean
    onClick?(): void
}

function NavbarLink({ icon: Icon, label, active, onClick }: NavbarLinkProps) {
    const { classes, cx } = useStyles()
    return (
        <Tooltip
            label={label}
            position="right"
            withArrow
            transitionDuration={0}
        >
            <UnstyledButton
                onClick={onClick}
                className={cx(classes.link, { [classes.active]: active })}
            >
                <Icon />
            </UnstyledButton>
        </Tooltip>
    )
}

but the component throws the error: JSX element type 'Icon' does not have any construct or call signatures.ts(2604)