Why is my .heic spatial image is not working on Safari using Vision Pro?

I'm working on a school project to build a webpage for Vision Pro users. I'm using Xcode to build this webpage because it has .reality files. This webpage only works on Safari because I took a spatial image with my Vision Pro, and it's .heic file type.

I put the .png version below the .heic file that is supposed to have the spatial effect. I deployed this project on Vercel, please use Safari to check out the link: https://spatial-design-project.vercel.app

There's another issue in this project, I downloaded the Cosmonaut .reality file on Apple Quick Look Gallery to test on my webpage. However, when I open it on Vision Pro, the file won't load, it says "Failed to load layers". Does it have something to do with the server for serving this file type? Should I use an actual web hosting company for this website?

Here is my GitHub repo

<div class="hero">
        <div class="hero-text">
            <h1>La Sal Peak</h1>
            <p>The Do-It-All Enduro Bike</p>
        </div>
</div>
    
<div class="hero2">
        <div class="hero-text">
            <h1>La Sal Peak</h1>
            <p>The Do-It-All Enduro Bike</p>
        </div>
</div>

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  height: 100vh;
  background: url("assets/heroImage.heic") no-repeat center center/cover;
  color: white;
}

.hero2 {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  height: 100vh;
  background: url("assets/hero.png") no-repeat center center/cover;
  color: white;
}