[SalesForce] Binding Javascript map to Aura Attribute map

A similar question was asked here but unfortunately not appropriately answered.

I have my aura map declared as follows

<aura:attribute name="productInfoMap" type="Map" default="{}"

in my javascript controller I create the following:

let productInfoMap = new Map();

I'm not going to go into the very lengthy logic of assigning the map values but a console.log of the final result reads pretty normally:

Map(3) {"0WOP00000004XXXXX" => undefined, "0WOP0000000XXXXX" => Array(2), "0WOP0000000XXXXX" => Array(2)}
size: 3
__proto__: Map
[[Entries]]: Array(3)
0: {"0WOP0000000XXXXX" => undefined}
1: {"0WOP0000000XXXXX" => Array(2)}
2: {"0WOP0000000XXXXX" => Array(2)}

however, setting the aura attribute to the javascript map like so:

component.set("v.productInfoMap", productInfoMap);

and trying to access the values gives me the following error:

[[Handler]]: Object
[[Target]]: Map
size: [Exception: TypeError: Method get Map.prototype.size called on incompatible receiver #<Map> at Map.get size [as size] (<anonymous>) at Map.invokeGetter (<anonymous>:2:14)]
__proto__: Map

What am I doing wrong? should I give up and just make a new js Object as opposed to a JS map?