Trying to update instancedMesh count value but nothing happens.

[benjamin-krummel-by]

I am trying to create a new instancedMesh so that it would have dynamic values for how many instances it has in it. I am getting the count of instances contained after I make a web request so when the page initially loads it has no idea of how many instances it would need to render.

<Canvas
        style={{ height: '100vh', width: '100vw' }}
        className="canvas"
        onCreated={({ gl }) => gl.setClearColor('black')}
        resize={{ polyfill: ResizeObserver }}
      >
        <ambientLight intensity={0.5} />
        <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
        <pointLight position={[-10, -10, -10]} />
        {addLocationsToMatrix(mesh, locationsToGenerate)}
        <OrbitControls />
</Canvas>

This is the function that is returning the instancedMesh. I can see the code hitting this one a second time to return another instanced mesh but it doesn't get rendered. Is there an easy way to dynamically change the count on the instanced mesh. I read a couple of older posts saying that you have to create a new one if you want to change the count but that doesn't seem to be working in my case. Any suggestions/help would be appreciated.

function addLocationsToMatrix(
  mesh: MutableRefObject<InstancedMeshProps>,
  locationsToGenerate: LocationsToGenerateData
) {
  if (locationsToGenerate.locations) {
    const tempObject = new Object3D();
    let i = 0;
    locationsToGenerate.locations.map((locations) => {
      locations.entities.map((location) => {
        tempObject.position.set(
          location.xMapPosition / 50000,
          location.yMapPosition / 50000,
          location.zMapPosition / 50000
        );
        tempObject.scale.set(location.length / 50000, location.depth / 50000, location.height / 50000);
        tempObject.updateMatrix();
        mesh.current.setMatrixAt(i, tempObject.matrix);
        locationNames.push(location.locationName);
        i++;
      });
    });
    mesh.current.instanceMatrix.needsUpdate = true;
  }
  return (
    <instancedMesh ref={mesh} args={[null, null, locationsToGenerate.count]}>
      <boxBufferGeometry attach="geometry" />
      <meshNormalMaterial />
    </instancedMesh>
  );
}

[drcmda]

the code above return is a side effect, you cant run that in the render function, nor is mesh.current known at that time. this is what useEffect is for.