I have searched the forums, and am unable to understand why my .js file is returning this error:
react-reconciler.development.js:5931
Uncaught Error: Objects are not valid as a React child (found: object with keys {isBufferGeometry, uuid, name, type, index, attributes, morphAttributes, morphTargetsRelative, groups, boundingBox, boundingSphere, drawRange, userData}). If you meant to render a collection of children, use an array instead.
at throwOnInvalidObjectType (react-reconciler.development.js:5931:9)
at createChild (react-reconciler.development.js:6185:7)
at reconcileChildrenArray (react-reconciler.development.js:6457:25)
at reconcileChildFibers (react-reconciler.development.js:6877:16)
at reconcileChildren (react-reconciler.development.js:11398:28)
at updateHostComponent$1 (react-reconciler.development.js:12147:3)
at beginWork (react-reconciler.development.js:13862:14)
at HTMLUnknownElement.callCallback (react-reconciler.development.js:14219:14)
at Object.invokeGuardedCallbackDev (react-reconciler.development.js:14268:16)
at invokeGuardedCallback (react-reconciler.development.js:14329:31)
at beginWork$1 (react-reconciler.development.js:19537:7)
at performUnitOfWork (react-reconciler.development.js:18686:12)
at workLoopSync (react-reconciler.development.js:18597:5)
at renderRootSync (react-reconciler.development.js:18565:7)
at performConcurrentWorkOnRoot (react-reconciler.development.js:17836:74)
at workLoop (scheduler.development.js:266:34)
at flushWork (scheduler.development.js:239:14)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21)I am attempting to load a gltf mesh into my react-three-fiber scene and include a react scale event. I successfully loaded the gltf, however I am getting tripped up by the JSX syntax when I try to incorporate it with properties I've defined.
Here is my code:
function foobut(props) {
const { nodes, materials } = useGLTF("/foobut.glb")
const myMesh = React.useRef();
const [active, setActive] = useState(false);
return (
<mesh
scale={active ? 1.5 : 1}
onClick={() => setActive(!active)}
ref={myMesh}
>
castShadow
receiveShadow
geometry={nodes.Circle.geometry}
material={nodes.Circle.material}
scale={0.50}
position={[0, 0, 0]}
material-metalness={4.6}
</ mesh>
);
}EDIT: The issue disappears when I nest everything in "<mesh ... />". However, I do not believe this is the correct method, as the animations do not work--it is stuck on one frame. Furthermore, this contradicts practices I've seen in other works (e.g., https://codesandbox.io/s/rrppl0y8l4?file=/src/App.js:584-594 -- notice what is nested in the mesh 
).