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?