Mapbox GL同位置双多边形无法分层拉伸问题求助

我在React 18.2中使用Mapbox GL 2.10，场景里有两个位置完全重合的多边形。点击按钮时，我希望这两个多边形在同一位置上下分层拉伸，目标效果参考GitHub Issue #5768。

我参考该Issue中的代码逻辑，点击按钮时将两个要素切换到带样式表达式的图层，通过fill-extrusion-height和fill-extrusion-base设置拉伸参数，使用要素的elev属性（值分别为100、200）计算基准高度和拉伸高度。但最终仅能看到一个拉伸后的多边形，第二个无法显示。

相关代码如下：

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;

相关示例和效果截图可参考原文提供的资源。

请问我遗漏了什么？

内容的提问来源于stack exchange，提问作者slevin