TypeError: unhideTextInstance is not a function in react.js + three.js project

Question

I was using Three.js in my React Project. I used OBJLoader to render 3D model in my web page, but when I refreshed the page, it occurred an error, which said "TypeError: unhideTextInstance is not a function". But sometimes it worked without displaying any error.

I checked my Chrome inspection, it may relate to the Suspend tag and Provider tag.

Any help would be APPRECIATED!!!

index.js

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { store } from './store';
import  App  from './App';
import './index.css';

// setup fake backend
import { fakeBackend } from './helpers';
fakeBackend();

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
    <React.StrictMode>
        <Provider store={store}>
            <BrowserRouter>
                <App />
            </BrowserRouter>
        </Provider>
    </React.StrictMode>
);

App.js

import {
  Routes,
  Route,
  Navigate,
  useNavigate,
  useLocation,
} from "react-router-dom";

import { history } from "./helpers";
import { Nav, PrivateRoute } from "./components";
import { Home } from "./page/home";
import { Login } from "./page/login";
import ObjLoad  from "./components/ObjLoad";
export default function App() {
 
  history.navigate = useNavigate();
  history.location = useLocation();

  return (
    <div>
      <Nav />
      <div>
        <Routes>
          <Route path="/" element={<ObjLoad />} />         
          <Route path="/login" element={<Login />} />
          <Route path="*" element={<Navigate to="/" />} />
        </Routes>
      </div>
    </div>
  );
}

ObjLoad.js

import * as THREE from "three";
import { Canvas, useLoader } from "@react-three/fiber";
import { Environment, OrbitControls } from "@react-three/drei";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
import { DDSLoader } from "three-stdlib";
import { Suspense } from "react";

THREE.DefaultLoadingManager.addHandler(/\.dds$/i, new DDSLoader());

const Scene = () => {
  const materials = useLoader(MTLLoader, "test.mtl");
  const obj = useLoader(OBJLoader, "test.obj", (loader) => {
    materials.preload();
    loader.setMaterials(materials);
  });

  console.log(obj);
  return (
    <>
      <primitive object={obj} scale={0.001} position={[-7,-1,0]} rotation={[0, 0, 0]} />;
      <ambientLight intensity={0.5} /> 
    </>
  );
};

export default function OBJLoad() {
  return (
    <div className="OBJLoad">
      <Canvas>
        <Suspense fallback={<></>}>
          <Scene />
          <OrbitControls />
        </Suspense>
      </Canvas>
    </div>
  );
}