How to pass value to rendered children?

I have an await block in my +layout.svelte for a product fetch function in the load function.

When the promise is fullfilled it renders a +page.svelte as a children and I need to pass the product to that page.

{#await $page.data.productData}<div class="flex flex-col flex-grow h-64 justify-center items-center"><Spinner /></div>{:then product}    {#key data.pathname}<div in:fade|global={{ duration: 300 }}>            {@render children?.(product)}</div>    {/key}{/await}

in the +page.svelte that is rendered, how can I access product?

At the moment I'm using a context but I want to await only one time for the function.

onMount(async () => {    product.set(await $page.data.productData)});