Cannot extrude 2 polygons in the same position in mapbox

I am using mapbox gl 2.10 inside react 18.2

I have two polygons in the same position 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 here . Based on the code found there , when a button is clicked, 2 features are transferred to a styled layer with style expressions based on fill-extrusion-height and fill-extrusion-base.

import { useRef, useEffect, useState } from "react";
import mapboxgl from "!mapbox-gl"; // eslint-disable-line import/no-webpack-loader-syntax
mapboxgl.accessToken = "123";

const Map = () => {
  const mapContainer = useRef(null);
  const map = useRef(null);
  const [lng, setLng] = useState(23.7309);
  const [lat, setLat] = useState(37.9558);
  const [zoom, setZoom] = useState(15);

  const polygonTest = () => {
    //when button clicked, pass those 2 features to countries-highlighted layer to get new style
    const idtable = [11543, 11544];
    map.current.setFilter("countries-highlighted", ["in", "id", ...idtable]);
    map.current.flyTo({ center: [23.7417, 37.9569], pitch: 40, zoom: 17.85 });
  };

  useEffect(() => {
    if (map.current) return; // initialize map only once

    map.current = new mapboxgl.Map({
      container: mapContainer.current,
      style: "mapbox://styles/mapbox/streets-v11",
      center: [lng, lat],
      zoom: zoom,
    }); //map

    map.current.on("load", () => {
      map.current.addSource("countries", {
        type: "geojson",
        data: "http://localhost:3000/mydata.geojson",
      });

      map.current.addLayer({
        id: "countries",
        type: "fill-extrusion",
        source: "countries",
        paint: {
          "fill-extrusion-color": "black",
          "fill-extrusion-height": 0,
          "fill-extrusion-base": 0,
        },
      });

      map.current.addLayer({
        id: "countries-highlighted",
        type: "fill-extrusion",
        source: "countries",
        paint: {
          "fill-extrusion-color": "red",
          "fill-extrusion-height": ["+", ["number", ["get", "elev"], 5], 5],
          "fill-extrusion-base": ["+", ["number", ["get", "elev"], 7], 10],
        },
        filter: ["in", "id", ""],
      });
    }); //load
  }, [lat, lng, zoom]); //useEffect

  return (
    <div>
      <h3>Map</h3>
      <button onClick={() => polygonTest()}>polygonTest</button>
      <div ref={mapContainer} className="map-container" />
    </div>
  );
};

export default Map;

I use the elev attribute of the feature, I add some value to it and pass it to fill-extrusion-base, this is the distance between polygons. Then, for the height to which I extrude the polygons is the elev with a number added, less than the base. elev has value 100 , 200.

The result I get is a polygon above the ground (see image). I cannot see the second polygon.

find the codepen here

What am I missing here ?

from Cannot extrude 2 polygons in the same position in mapbox