Shared material via useState aren't being updated

[hazem3500]

So I'm sharing material between geometries via useState

import { Plane, Sphere, Torus } from '@react-three/drei'
import { useState } from 'react'

function Model() {
  const [material, setMaterial] = useState()

  return (
    <>
      <meshBasicMaterial ref={setMaterial} color="aqua" />
      {material && (
        <>
          <Sphere args={[1, 32, 32]} material={material} />
          <Plane args={[2, 2]} position={[3, 0, 0]} material={material} />
          <Torus args={[1, 0.5, 32, 32]} position={[-3.5, 0, 0]} material={material} />
        </>
      )}
    </>
  )
}

But the geometries aren't being updated with the materials.

Codesandbox link: https://codesandbox.io/s/shared-material-issue-6mm78

[drcmda]

normalmaterial does not have a color. opacity seems to react fine. that it doesn't work on first render is because of stage/center, which expects geometry to be present, but on first render there's none.

[hazem3500]

Oh, I've meant to use meshBasicMaterial in the demo 😅

So the problem is that Stage expects there to be a geometry but initially it's not present, correct?

So this is just an edge-case when trying to reuse material via useState while using it inside Stage?

[drcmda]

in your situation there is no result, you only have a material and you setstate it it, so the result will be there next render. stage calculates the boundaries of its children in useEffect, these are 0, so it places the camera at 0/0/0. it does not get notified that the component inside now re-renders due to the setstate, that's how react works. i'd remove stage from this and place lights, environment by hand. stage is for prototyping anyway, it's mostly just for trying stuff out real quick but it's too inflexible to be good for much else.