web-ifc-three: react-three-fiber: manually have to set `manager.state.models[modelID]` before `createSubset` + `removeSubset` not working

Description

In my react-three-fiber project, I have to manually set ifcManager.state.models[modelId] before making a call to ifcManager.createSubset(). I thought the createSubset method would handle this on it’s own:

const [highlightedModel, setHighlightedModel] = useState({ id: -1 });

function highlight(intersection: Intersection<IFCModel<Event>>, material: Material) {
    const { faceIndex } = intersection;
    const { modelID, geometry } = intersection.object;
    const id = manager.getExpressId(geometry, faceIndex);

    setHighlightedModel({ id: modelID });

    manager.state.models[modelID] = intersection.object;

    manager.createSubset({
      modelID,
      ids: [id],
      material,
      scene,
      removePrevious: true,
    });
  }

Without the call to manager.state.models[modelID] = intersection.object; I get the following error:

Uncaught TypeError: this.state.models[modelID] is undefined
    getGeometry ItemsMap.ts:117
    generateGeometryIndexMap ItemsMap.ts:94
    createSubset SubsetCreator.ts:79
    createSubset BasePropertyManager.ts:9
    createSubset web-ifc-three_IFCLoader.js:54214
    highlight IFCContainer.tsx:44
    handleDblClick IFCContainer.tsx:32
    handlePointer react-three-fiber.esm.js:414
    handleIntersects react-three-fiber.esm.js:289
    handlePointer react-three-fiber.esm.js:376
    connect react-three-fiber.esm.js:1465
    connect react-three-fiber.esm.js:1463
    Provider react-three-fiber.esm.js:1807
    invokePassiveEffectCreate react-reconciler.development.js:16054
    callCallback2 react-reconciler.development.js:12184
    invokeGuardedCallbackDev react-reconciler.development.js:12233
    invokeGuardedCallback react-reconciler.development.js:12292
    flushPassiveEffectsImpl react-reconciler.development.js:16141
    unstable_runWithPriority scheduler.development.js:468
    runWithPriority react-reconciler.development.js:2495
    flushPassiveEffects react-reconciler.development.js:16014
    commitBeforeMutationEffects react-reconciler.development.js:15891
    workLoop scheduler.development.js:417
    flushWork scheduler.development.js:390
    performWorkUntilDeadline scheduler.development.js:157
    js scheduler.development.js:180
    js scheduler.development.js:644
    __require2 chunk-UC7LELEO.js:48
    js index.js:6
    __require2 chunk-UC7LELEO.js:48
    React 2
    __require2 chunk-UC7LELEO.js:48
    js React
    __require2 chunk-UC7LELEO.js:48
    <anonymous> react-dom:1
ItemsMap.ts:117:9

Additionally, when I call removeSubset(modelID, highlightMaterial) visually it appears the highlight remains on the model:

  function handleDblClick(event: Intersection<IFCModel<Event>>) {
    if (Object.keys(manager.state.models).length) {
      manager.removeSubset(highlightedModel.id, highlightMaterial);
    }
    highlight(event, highlightMaterial);
  }

Steps to Reproduce

I have a repo where I reproduce this issue here.

git clone git@github.com:Amar-Gill/r3f-model-highlight-repro.git
cd r3f-model-highlight-repro/
npm i && npm run dev

Double click any mesh, it will be highlighted. Double clicking a new mesh will highlight it also, but the highlight on the previously clicked mesh will remain:

Next, comment out the line for manager.state.models[modelID] = intersection.object; and double click a mesh. The mesh will not highlight and error will appear on console:

Uncaught TypeError: this.state.models[modelID] is undefined