react-three-fiber multiple meshes lose models except for last one

I have been developing an application in React using react-three-fiber to visually display data. I am trying to create different models by passing data denoting their properties as props into components. My problem occurs here as while inside each component I am able to add a simple shape (e.g. cube) and get it to display properly, when I declare a model inside each component to be used it only seems to be picked up for the last component created;

Top-level component canvas simplified

return (
    <div> 
        <Canvas> 
            <Suspense fallback={null}>
                <Items items={this.state.data}/>
            </Suspense>
        </Canvas>
    </div>
)

Middle-level component

// count is to identify the position in the loop so that the meshes do not overlap 

import React, {Component} from 'react';
import ITEM from './ITEM';

class Items extends Component {
    
    render() {
        return this.props.items.map((item, i) => (
            <ITEM key={i} item={item} count={i}/>
        ));
    }
}

Bottom-level component

// I have been using the drei GLTF loader to get the model

import React, {useRef} from 'react';
import {useFrame} from 'react-three-fiber';
import {useGLTF} from 'drei';

const Model = ({modelPath}) => {
    const gltf = useGLTF(modelPath, true)
    return <primitive object={gltf.scene} dispose={null}/>
};

const ITEM = ({item, count}) => {

    const modelPath = '/model/scene.gltf';

    const mesh = useRef(null);
    useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01));
    return (
        <mesh castShadow position={[1, 1, 1]} ref={mesh}>
            <Model modelPath={modelPath}/>
        </mesh>
    );
};