Reactjs – Typescript issue : Type '{ x;y }' must have a '[Symbol.iterator]()

I’m new to Typescript, converting a react project from js to ts

I checked out some other posts, but I’m going round in circles

any help would be appreciated

my cart object looks like this

{
    "9190970": {
        "name": "Lachlan Ridge Shiraz 2L",
        "brand": "Lachlan Ridge",
        "shortName": "Shiraz 2L",
        "price": 8,
        "qty": 1,
        "deal": {
            "percentOff": 10
        },
        "discountCode": "SAVE10"
    },
    "9197550": {
        "name": "St Hugo GSM 750mL",
        "brand": "St Hugo",
        "shortName": "GSM 750mL",
        "price": 40,
        "qty": 1,
        "deal": 0
    },
    "9948867": {
        "name": "Squealing Pig Marlborough Sauvignon Blanc 750mL",
        "brand": "Squealing Pig",
        "shortName": "Marlborough Sauvignon Blanc 750mL",
        "price": 16,
        "qty": 2,
        "deal": 0
    }
}

Then in my Cart Component

type CartProps = {
  [id: string]: {
    name: string;
    brand: string;
    shortName: string;
    price: number;
    qty: number;
    deal?: {
      twoFor?: number;
    };
    dealPrice?: number;
    discountCode?: string;
  };
};

const cart: CartProps = useSelector(selectCart); // redux

render fn

  <ul className={styles.list}>
    {Object.values(cart).map(
      ([id, { name, brand, shortName, qty, price, deal, dealPrice }]) => (
       // ERROR HERE: must have a '[Symbol.iterator]()' method that returns an iterator.ts(2488)

Thanks