Accessing image files in public folder after deploying to gh pages breaking

Question

I deployed my react app to gh-pages and my images arent loading anymore. They are held in the public folder and I am loading the them using the react-three-fiber hook useLoader according to their documentation like this:

const [theImage, 2ndImage] = useLoader(TextureLoader, [
        "/{folderName}/{the-image}.jpeg",
        ".../etc",
    ])

Also Ive tried directing to the image using process.env.PUBLIC_URL + "/{folderName}/{the-image}.jpeg"

Gh-pages documentation says best practice is to load the image with the relative path and not the absolute path. But still my page cant seem to access them.

My Console error reads:

Uncaught Error: Could not load /{myrepo}{folderName}/{the-image}.jpeg: undefined)
 at index-6f0019d1.esm.js:1670:1

Ive seen other post on this issue like this one but I dont quite understand the answer marked as correct. Can anyone explain?