I'm using react-graph-vis as a React component for graphing large amounts of data. For some reason, I am unable to get the clustering function of the underlying vis.js to work. When invoked, the code simply re-renders the existing (unclustered) network graph when I call the clustering API. I'm wondering whether anyone has implemented this or has any suggestions. Specifically, I track the edge count for each node as a node property and, in response to user input, I am trying to cluster all nodes having an edge count that exceeds a user-defined threshold. I'm unable to get any clustering to render, even using a simple joinCondition based on a label. When I run the code, all nodes are correctly checked by the joinCondition callback function in response to the UI but no clusters are rendered on the graph. Thanks!

 import React, { useEffect, useState, useContext, useRef } from 'react';
 import { v4 as uuidv4 } from 'uuid'; 

// this function is called in response to UI element; 
// cluster if node edges > threshold

function clusterGraph(edgeThreshold) {

var clusterOptions = {
  joinCondition: function (nodeOptions) {
    console.log("checking node for clustering", sliderSetting, nodeOptions);
    return nodeOptions.edgeCount >= edgeThreshold; 
  },
  clusterNodeProperties: {
    id: "cidCluster",
    borderWidth: 3,
    shape: "database",
  },
  
};

networkReference.current.clustering.cluster(clusterOptions);

}

...
  const optionsData = {
  interaction: {
    hover:true,
    navigationButtons:true,
  },
  autoResize: true,
  // height: '100%',
  width: graphWidth,
  height: graphHeight,  
  layout: {
    hierarchical: false
  },
  // arrowStrikethrough: false,
  edges: {
    length: 200,
    color: "#000000",
    font: '14px arial #000000',
    arrows: {
      to: {
        enabled: true,
        type: "arrow"
        },
      from: {
        enabled: false,
        type: "arrow"
        }
      },
    scaling: {
      min: 1,
      max: 3,
      label: {
          enabled: true,
      },
    }
  },

};

const events = {    
select: function(event) {
  var { nodes, edges } = event;
}, 
doubleClick: handleNodeDoubleClick,
};

  ... 

    <Graph
         graph={data}
         options={optionsData}
         events={events}
         key={uuidv4()} 
         getNetwork={network => (networkReference.current = network)}
     />