After Update, Getting Popup Errors with Stacked GeoJSON Layers/Points in Vue.js 3 App

[BBarbs]

Hello Community!

I am beginning the process of upgrading our apps to 4.32. I currently have an app running JavaScript Maps SDK 4.30 that is built using Vue.JS 3. After upgrading to 4.31 or 4.32, I have noticed whenever there are two points in one location (lat/long-- which happens often with our data), or there is another layer underneath a point, clicking for a popup throws two RangeErrors; 

4.32 Popup Error

Oddly, I don't have this issue at all when the app is using 4.30.9. Clicking points stacked on one another properly displays a popup that allows me to cycle through the points in that location to view their attributes. Only when I use 4.31.6 or the more recent 4.32 release do I get this issue. 

Does anyone have any ideas what is going on with 4.31/4.32 or how I can work around this problem?

I have created a small app that mimics what I'm seeing in our main one. You can find it here on codesandbox or the repo itself. There are two points with the same lat/long in Dallas and clicking on them will throw the errors. The point near Denton is by itself and will not throw the error. However, adding the counties feature layer via the button and then clicking the Denton point will cause the errors. This is my first time using codesandbox, so please let me know if you have any issues.

Here is the code block in my Map.vue component (you'll find it in src -> components) I use to create the GeoJSON layer:

const geoJSON = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [-96.7969, 32.7767],
      },
      properties: {
        CITY: "Dallas",
        PROGRAM: "Big D Belly Laughs",
        SBPRGRM: "Subprogram Snickers",
        IN_PROGRAM_NETWORK: 1,
        NAME: "Chuckles",
        ID: 2345678,
        SUPERTYPE: "Type LOL",
      },
    },
    {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [-96.7969, 32.7767],
      },
      properties: {
        CITY: "Dallas 2",
        PROGRAM: "Big D Belly Laughs 2",
        SBPRGRM: "Subprogram Snickers 2",
        IN_PROGRAM_NETWORK: 1,
        NAME: "Chuckles 2",
        ID: 2345679,
        SUPERTYPE: "Type LOL 2",
      },
    },
    {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [-97.0586, 33.2148],
      },
      properties: {
        CITY: "Denton",
        PROGRAM: "North Texas Nonsense",
        SBPRGRM: "Subprogram Snickers",
        IN_PROGRAM_NETWORK: 1,
        NAME: "Grins",
        ID: 8901234,
        SUPERTYPE: "Type ROFL",
      },
    },
  ],
};

const popupTemplate = {
  title: "Location",
  content: [
    {
      type: "fields",
      fieldInfos: [
        {
          fieldName: "CITY",
          label: "City",
        },
        {
          fieldName: "PROGRAM",
          label: "Program",
        },
        {
          fieldName: "SBPRGRM",
          label: "Subprogram",
        },
        {
          fieldName: "NAME",
          label: "Name",
        },
      ],
    },
  ],
};

const blob = new Blob([JSON.stringify(geoJSON)], {
  type: "application/json",
});

const url = URL.createObjectURL(blob);

const geoJsonLayer = new GeoJSONLayer({
  url,
  title: "In-Network Provider",
  outFields: ["*"],
  popupTemplate: popupTemplate,
  renderer: {
    type: "simple",
    symbol: {
      type: "simple-marker",
      color: "#00897B",
      size: 12,
    },
  },
});