useGLTF: Using useGLTF with createPortal causes "maximum update depth" error

[gkjohnson]

• three version: 169
• @react-three/fiber version: 8.17.9
• @react-three/drei version: 9.114
• node version: -
• npm (or yarn) version: -

Problem description:

When using "useGLTF" in a component that is subsequently rendered using "createPortal" the application crashes with a "maximum update depth exceeded" or freezes the page in some cases.

Relevant code:

Here's a code sandbox the reproduces the issue:

https://codesandbox.io/p/sandbox/lively-field-9dm7gv?file=%2Fsrc%2FApp.js

function PortalTest() {
  const [group, setGroup] = useState(null)
  return (
    <>
      <group ref={setGroup} />
      {group && createPortal(<Scene />, group)}
    </>
  )
}

function Scene() {
  const { gl } = useThree()
  const { scene } = useGLTF('facecap.glb', false, false)
  return <primitive object={scene} />
}

Suggested solution:

I'm not sure whether this is a drei or r3f issue.