How to preserve reactivity in a multilevel object stored in a nanostore map ?

export const getCartItems = map<CartItems>({
  id1: {
    id: 'id1',
    quantity: 1,
    type: 'product',
    meta: {
      // Some static values ...
    }
  },
  id2: {
    id: 'id2',
    quantity: 1,
    type: 'product',
    meta: {
      // Some static values ...
    }
  },
})

const CartItem = () => {
  const $items = useStore(getCartItems)
  const $total = useStore(getCartTotal)

  return (
    <div>
      <h1 class="text-3xl bold pb-6">Total : {$total()}</h1>

      <div class="pb-2">
        <h1>items </h1>
        <For each={Object.values($items())}>
            {(item) => (
              <span><b>id</b>{item.id}, <b>quantity</b>: {item.quantity}</span>
            )}
        </For>
      </div>
    </div>
  )
}

// don't work
const useCart = () => {
  items: useStore(getCartItems)
}

// deriving signal, don't work either
const useCart = () => {
  items: () => useStore(getCartItems)()
}

// Not working either withtout the object
const $getCartItems = () => useStore(getCartItems)()