A ToolTip for Fluent UI framework with extended content

ExtendedToolTip.tsx

{(() => {
    const imageUrl = `https://studentiunimi-groups-propics.marcoaceti.workers.dev/${x.user_id}.png`;
    const tooltipProps: ITooltipProps = {
        onRenderContent: () => (
            <div>
                <div className="mb-1">
                    <Text variant="large" styles={semibold}><Link href={`https://t.me/${x.username}`}>@{x.username}</Link></Text><br />
                    <Text variant="medium" styles={semibold}>{x.delega}</Text><br />
                </div>
                <div>
                    <Text variant="medium">{x.cdl}</Text>
                </div>
            </div>
        ),
    };
    return (
        <TooltipHost
            tooltipProps={tooltipProps}
            calloutProps={calloutPropsContributor}
            styles={hostStyles}
            delay={TooltipDelay.zero}
            key={i}
        >
            <Persona onRenderPrimaryText={() => null} imageUrl={imageUrl} text={x.username} className="mb-1" size={PersonaSize.size72} />
        </TooltipHost>
    )
})()}