React Three Fiber calling useGLTF inside useEffect

I have a shoes component as below, whenever the props currentShoes change, I need to update the nodes and materials from useGLTF, is there a way to achieve this? Right now when parent component change the shoes I got the error: Cannot read properties of undefined (reading 'geometry') It seems that material and nodes are not getting updated at all. I'm new to react and threejs so any help is appreciated.

import { useGLTF } from '@react-three/drei';
import { useState, useEffect } from 'react';

const Shoes = (props) => {
  const defaultPath = props.currentShoes ? props.currentShoes.path : '/models/nike_air_force_1_one_low_white.glb';

  const [modelPath, setModelPath] = useState(defaultPath);
  const [color, setColor] = useState(0xffffff);

  const { nodes, materials } = useGLTF(modelPath);

  useEffect(() => {
    console.log('Current Shoes Changed:', props.currentShoes);
    setModelPath(defaultPath);
  }, [props.currentShoes]);

  const renderShoe = () => {
    if (!props.currentShoes) {
      return (<></>);
    }
    switch (props.currentShoes.model) {
      case 'nike':
        return (
          <group scale={0.01}>
            <mesh
              castShadow
              receiveShadow
              geometry={nodes.NIKE_air_force_1_white1_lambert3_0.geometry}
              material={materials.lambert3}
              material-color={color}
            />
          </group>
        );
      case 'adidas':
        return (
          <group scale={0.01}>
            <mesh
              castShadow
              receiveShadow
              geometry={nodes.NIKE_air_force_1_white1_lambert3_0.geometry}
              material={materials.lambert3}
              material-color={color}
            />
          </group>
        );
      case 'converse':
        return (
          <mesh
            castShadow
            receiveShadow
            geometry={nodes.mesh_0_0nr2_mat_0006_0.geometry}
            material={materials['mat_0.006']}
            scale={0.01}
          />
        );
      default:
        return null;
    }
  };

  return <group {...props} dispose={null}>{renderShoe()}</group>;
};

useGLTF.preload('/models/nike_air_force_1_one_low_white.glb');
useGLTF.preload('/models/converse.glb');

export default Shoes;