svelte only renders component outside of if block

Okay, so this one had me pulling my hair for a while and I am sure there is something I am missing here:

<script lang="ts">    import Social from './social.svelte';    import GithubSolid from 'flowbite-svelte-icons/GithubSolid.svelte';    import YoutubeSolid from 'flowbite-svelte-icons/YoutubeSolid.svelte';    import { socialMediaLinks, type SocialMedias } from './index';    let medias = Object.keys(socialMediaLinks) as SocialMedias[];</script>{#snippet rc(Comp)}<Comp size="10" />{/snippet}<div><div class="flex flex-row justify-between">        {#each medias as media}<Social hrefLink={socialMediaLinks[media]}>                {#if media === 'youtube'}<!-- <p>Youtube</p> -->                    {@render rc(YoutubeSolid)}                {:else if media === 'github'}                    {@render rc(GithubSolid)}                {/if}</Social>        {/each}</div></div>

socialMediaLinks is an object with following properties:

export const socialMediaLinks = {    github: 'https://github.com/saralio',    youtube: 'https://youtube.com/@data_questin',    linkedin: 'https://linkedin.com/in/saralio'};export type SocialMedias = keyof typeof socialMediaLinks;

And the Social component has following code:

<script lang="ts">    import type { Snippet } from 'svelte';    type Props = {        hrefLink: string;        children: Snippet;    };    let { hrefLink, children }: Props = $props();</script><div><a href={hrefLink} target="_blank" rel="noopener noreferrer">        {@render children()}</a></div>

It's only showing the icons on the screen if I include something else (like the commented line in 'youtube' clause, <!-- <p>Youtube</p> -->). Without this, it doesn't show anything. If I include the YoutubeSolid (or GithubSolid) component outside the each block, it is able to render.

What am I missing here?