Tengo una función de update() que se ejecuta inicialmente y muestra todos los datos creando algunos círculos usando la distancia, el ángulo y el color. Los datos iniciales son una matriz de objetos. La estructura se muestra a continuación.

 [ { Category: {string} SubCategory: {string} Technology: {string} Distance: {string | int} 0 - 100 Angle: {string | int} 0 - 100 Colour: {string} Description: {string} }, ... ]

El resultado final es tener algunos filtros de casilla de verificación disponibles y poder ocultar y mostrar ciertas categorías. Con fines de prueba, he creado algunos botones en mi aplicación para ayudar a hacer esto. Hay una variable global llamada filterArray que inicialmente contiene todos los nombres de categoría como cadenas.

Uno de los botones actualiza esta matriz para contener 2 nombres de categoría. Uno de los botones actualiza esta matriz para que contenga 3 nombres de categoría. El último botón es el que estoy usando para actualizar los círculos. Este último botón encuentra todos los círculos y los elimina y luego la función de actualización se ejecuta nuevamente con el filterArray actualizado para mostrar la lista actualizada de círculos.

El problema que ocurre es que si hace clic en el botón 3 Nombres de categoría y luego hace clic en el botón Actualizar, se muestran los círculos correctos. Si luego hace clic en el botón 2 Nombres de categoría y hace clic en el botón Actualizar, se muestran los círculos correctos. Si luego vuelve a hacer clic en el botón 3 Nombres de categoría y hace clic en el botón Actualizar, todavía solo muestra 2 categorías de círculos por alguna razón.

La aplicación se puede ver aquí: https://o4buh.csb.app/

El código de la aplicación se puede ver aquí: https://codesandbox.io/s/d3-tech-impact-magic-quadrant-o4buh?file=/src/index.js

Cualquier idea o consejo sería muy apreciado. Gracias.