Nested reactive state passed as a property

I have a SvelteKit app using Svelte 5. My app shows a basket, using a BasketLine component to show every product in the basket with its quantity:

<script lang="ts">  interface Props {    line: BasketLineWithOffers;  }  const { line }: Props = $props();</script><div><h2>{line.product.title}</h2><NumberPicker min={1} bind:value={line.quantity} /></div>

This is giving a runtime warning in the console:

[svelte] binding_property_non_reactivebind:value={line.quantity} (src/lib/basket/BasketLine.svelte:96:30) is binding to a non-reactive propertyhttps://svelte.dev/e/binding_property_non_reactive

Using the number picker (a simple component showing a number input as well as plus and minus button) doesn't change the quantity.

Using const { line = $bindable() }: Props = $props(); doesn't fix it either. So what is the correct way to pass a bindable line property to the BasketLine component in such a way that its properties are also bindable/reactive state? line is just a simple JSON object coming from the server.