Swapping pre-loaded GLTF objects on button click

Question

What I am trying to achieve is have a button that says "Change Models" and then the rendered model disappears and is replaced by one of the other models.

Any help is appreciated and truly means and helps a lot.

         const Scene = () => {
      const model1 = useGLTF("/assets/Models/City/scene.gltf", true)
    
      const model2 = useGLTF("/assets/Models/Skate/scene.gltf", true)
    
    
      const model3 = useGLTF("/assets/Models/London/scene.gltf", true)
    
    
      const options = [model1,model2,model3]
    
      const [scene, setScene] = useState(city)
      
    
      const onChange = ((e) => {
        setScene => {(
          options[Math.floor(Math.random() * options.length)]
        )
    
        }
    
      })    
      return (
        <primitive object={{scene}.scene} dispose={null} scale={10}  />
      )      
    }
    export default class Home extends React.Component {
        render(){
    
          return(
              <Canvas>
                <Suspense fallback={null}>
                  <Scene />
                </Suspense>
              </Canvas>
          )
        }
    
        
    
    
    
    }