React-three fiber instanced mesh with Drei

InstancedMesh.js

import { useGLTF, Instances, Instance } from '@react-three/drei'
import { MathUtils } from 'three'

const InstancedMesh = () => {
	const { nodes } = useGLTF('./model.glb')

	const randomVector = (r) =>
		Array(3)
			.fill()
			.map(() => MathUtils.randFloatSpread(r))

	const randomData = Array.from({ length: 8 }, () => ({
		position: randomVector(0.5),
		rotation: randomVector(Math.PI * 2)
	}))

	const renderModel = (model) => {
		return (
			<Instances geometry={model.geometry}>
				<meshStandardMaterial color={0xcccccc} />
				{randomData.map((props, i) => (
					<Instance {...props} key={i.toString()} />
				))}
			</Instances>
		)
	}

	return renderModel(nodes.geometry)
}

export default InstancedMesh