R3F and Drei, how to reset useProgress to its initial state on component unmount

Question

In react I'm using the "progress" state from useProgress hook to track the loading (and show my Loading component) of my gltf object which is located on my landing page. At this stage it works perfectly fine.

The issue is that once I'm logged in and so my component containing my gltf has unmounted the state of my useProgress hook keep its old values, and so progress === 100. Then, when I log out and therefore land on my homepage,as progress === 100 and my gltf object needs a small amount of time to load and it has this non user friendly "lag" time and my Loading component does show up.

Here is my code,

ThreeLoader:

const ThreejsLoader = () => {
  const { progress } = useProgress();

  const isLoaded = () => progress === 100;

  return (
    <AnimatePresence>
      {!isLoaded() && (
        <motion.div
          exit={{ opacity: 0, transition: { duration: 1 } }}
          className="three-loader"
        >
          <div className="loading juniob-card">
            <img
              alt="juniob logo"
              src="/assets/logo/logo-nobackground-200-light.png"
            ></img>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
};

export default ThreejsLoader;

Parent component:

const Layout = () => {
  const { user } = useAuth();

  return (
    <>
      <PersistLogin>
        <Links user={user} />
        <section className="container scroll-bar">
          {!user && (
            <>
              <ThreejsLoader />
              ^^^ the loader
              <div className="r3f">
                <HomePageThree />
              </div>
            </>
          )}
          <Routes user={user} />
        </section>
      </PersistLogin>
    </>`enter code here`
  );
};

export default Layout;

TL;DR: How to reset the state of useProgress to its initial state when unmounted?

Thank you!