Why Does Invalidate Only Re-render the First Three.js Web Component Instance?

Hello all!

I’m working with a Three.js application that’s wrapped in a web component and exported as an NPM package. This package is used to render multiple instances in another app, where I’m leveraging Three Fiber for rendering and Zustand for state management. The issue is that when I update a mesh (for example, applying a new material) and call invalidate from useThree, only the first rendered instance updates while the second one remains unchanged.

I attempted alternative approaches such as calling gl.render(scene, camera) or advance(), but nothing makes the second instance update. Debugging reveals that each instance has its own separate useThree store, different GL references, and distinct canvases, cameras, and scenes. Zustand also maintains separate store instances for each.

Below is my web component implementation:

JAVASCRIPTCopied
import React from 'react'
import * as ReactDOMClient from 'react-dom/client'
import reactToWebComponent from 'react-to-webcomponent'
import { ExtendedR2WCOptions } from 'extended-custom-types/extended-web-component-options'

import App from './App'

export const createWeb3DEngine = (tagName: string = 'web-3d-engine') => {
  if (!customElements.get(tagName)) {
    customElements.define(
      tagName,
      reactToWebComponent(App, React, ReactDOMClient, {
        props: {
          ...some props
        },
      } as ExtendedR2WCOptions),
    )
  }
}

Here is how the app is used in the host application:

JAVASCRIPTCopied
const MultiAppContainer = () => {
  return (
    <App {...testPropsFromAppLayer} />

    <App {...{ ...testPropsFromAppLayer }} />
  )
}

ReactDOM.createRoot(document.getElementById('root')!).render()

I also created a sandbox app that reproduces the issue:
https://codesandbox.io/p/sandbox/multiple-views-with-uniform-controls-forked-pd3q8d

Has anyone encountered this or have insights on how to ensure both instances update as expected?