gatsby in s3 subfolder not finding webpack and other js resources even with pathPrefix

Question

I have a gatsby site that works when I run it locally. It calls out to an api on another site. When I deploy into a subfolder in s3, it looks for webpack and other .js resources in the root of the bucket and not the subfolder where the files are. How can I make the index.html in the subfolder see the webpack files? I tried using pathPrefix and gatsby build --prefix-paths It always looks for the files in the root of the bucket when I deploy and I see errors like this; app-898d909668879f4bfc6a.js net::ERR_ABORTED 404 (Not Found)

Below is the code from index.js I added to the hello world sample from gatsby's site.

const IndexPage = () => {

const [Listing, setListing] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`https://clearlightdoor.com/cardsdict/7`);
      const json = await response.json();
      setListing(json);
    };

    fetchData();
  }, []);
  
  return (
    <main style={pageStyles}>
      <h1 style={headingStyles}>
        Congratulations
        <br />
        <span style={headingAccentStyles}>— you just made a Gatsby site! </span>
      </h1>
    <div>
      {/* {JSON.stringify(Listing)} */}
      12345
    {Listing.map(item => (
          <li>Name: {item.card_name}, Text: {item.card_text} <img src={item.card_url}></img></li>
        ))}
    </div>  

gatsby-confg.js

/**
 * @type {import('gatsby').GatsbyConfig}
 */
module.exports = {
  
  siteMetadata: {
    title: `reflectionsjs`,
    pathPrefix: `/reflections`,
    siteUrl: `https://tarot.clearlightdoor.com/reflections`,
  },
  plugins: [],
}
module.exports = {
 
}```