Attempting to load a .obj and .mtl file in my react app

Question

I am currently trying to load a 3D model I made into my react app. The 3D model exported as a folder which had a model.obj and a model.mtl file. After surfing the web for a bit I figured I could use Three-JS for this. My website is currently not displaying anything on the page I have this on.

import React from "react";
import { Canvas } from "@react-three/fiber";
import { ObjectLoader } from "three";
import { useLoader } from "@react-three/fiber";
import { MaterialLoader } from "three";

const ThreeDFloorPlan = () => {

    const materials = useLoader(MaterialLoader, "../models/floorplan.mtl")
    const object = useLoader(ObjectLoader, "../models/floorplan.obj", loader => {
        materials.preload()
        loader.setMaterials(materials)
    })
    return (
        <Canvas>
            <primitive object={object} />
        </Canvas>
    )
  }
  
  export default ThreeDFloorPlan;

import React from 'react';
import Button from '@mui/material/Button';
import { NavLink } from 'react-router-dom';
import ThreeDFloorPlan from '../components/ThreeDFloorPlan';

const Entry = () => {
  return (
    <div>
      <ThreeDFloorPlan />
    </div>
  );
};
  
export default Entry;

Would love some feedback or help on this matter!

I have tried various different ThreeJS walk throughs, scoured the internet, and pulled out a bit of hair.