GLTF model dissapears when state is changed

[dannyWoodford]

This is my first time working with react-three-fiber and I keep having this problem which I imagine to be a quick fix if I had some experience. When I click on the model the boxColorHandler function changes the state of the color of the light. That works but it makes the model disappear for some reason, I think it has to be updated somehow because the change in state is causing a rerender. This is my first time working with hooks as well.

here is my code. The model doesn't work in the codesandbox but does on my machine. Hopefully someone can see what I'm doing wrong without it. Thank you.

https://codesandbox.io/s/ecstatic-bardeen-lfoxg?file=/src/containers/Scene.js

[drcmda]

there were a couple of errors: https://codesandbox.io/s/clever-tereshkova-57ze6

"duck.gltf" didnt exist in the public folder

numbers in react always as ={123}, not ="123"

you re-created all components within the scene component, that means everything mounts and unmounts on every render from scratch, define components always in module scope

you didnt have dispose={null} on the primitive, so the unmount that you caused above disposes your geometries and materials, that's the model disappeared

you cant put receiveshadow on the primitive, in which you had a scene. that flag is only for meshes, a scene cant receive shadows. threejs people will normally traverse the scene to find their meshes, which is hella ugly, in react use this: https://github.com/react-spring/gltfjsx or, if you like, you can also directly tap into { nodes } which you get from useloader.

[dannyWoodford]

Thanks, I set that up. Do you think you can help me with another problem?

demo: https://codesandbox.io/s/lucid-dust-dv1qe?file=/src/containers/Scene.js

I can't seem to get the cubeCamera working and I can't find any examples of it being done in react-three-fiber. I was following this tutorial of how to do it in plain three.js. I've played around with it in many many many configurations but I can't get it to work. I'm trying to make the model reflective. I'm passing down a cubeCamera reference to the envMap in and I have a CubeCamera function in Scene.js to initiate and update the cubeCamera.
https://medium.com/@soffritti.pierfrancesco/dynamic-reflections-in-three-js-2d46f3378fc4

Comment-out line 32 in Model.js to see what it looks like without the error. Thanks for the help.