Cannot extrude 2 location in the same position using extrusion and filter for checking polygon ids

[spimou]

I am using mapbox gl 2.10.0 inside react 18.2 . I have two polygons in the same location and when I click a button I want to extrude those two polygons above each other in the same position. I want to achieve something like this . Based on this I created code to filter polygons to a fill-extrude layer, based on ids.

mapbox-gl-js version:2.10.0

browser: G Chrome Version 106.0.5249.119 (Official Build) (64-bit)

Steps to Trigger Behavior

1.when having map.current.setFilter('countries-highlighted', ['in', 'id', ...idtable]); click the polygonTest button and click the extruded polygon I get only one polygon, id 11543. No errors in the browser console.
2. when having map.current.setFilter('countries-highlighted', ['in', ['get','id'] , ...idtable ]) click the polygonTest button I get react_devtools_backend.js:4026 Error: layers.countries-highlighted.filter: Expected 2 arguments, but found 3 instead
3. when having map.current.setFilter('countries-highlighted', ['in', ['get','id'] , ['literal',[11543, 11544]] ]) click the polygonTest button I get Error: layers.countries-highlighted.filter: Expected 2 arguments, but found 3 instead
4. when having map.current.setFilter('countries-highlighted', ['in','id' , ['literal',[11543, 11544]] ]) click the polygonTest button I get no extrude polygon and no errors in the console.

Link to Demonstration

codepen

Expected Behavior

Filter array of ids to pass to the extrude layer, so they extrude one above the other, similar to this

Actual Behavior

Cannot extrude all polygons one above the other, or any one at all, depending on filter syntax.