How to data bind with pageData?

If I bind directly to data, like:

type Props = {  data: PageData;};let { data }: Props = $props();<input bind:value={data.product.name} />

I get the following warning:

[svelte] binding_property_non_reactivebind:value={data.product.name} (src/routes/...) is binding to a non-reactive property

if I destructure as $state(), like:

type Props = {  data: PageData;};let { data }: Props = $props();let { product } = $state(data);<input bind:value={product.name} />

the warning is gone, but then i lose reactivity when the data prop changes..

How can I bind, and not lose reactivity?