how to set up a react on rails 7 app with esbuild for production

Question

I have a rails 7 app with react as the front-end. I have esbuild as the bundler for the app. Everything works fine in development, but when I push the app to heroku, the css/scss and imported react images don't work.

This is my setup:

rails new app-name -d postgresql -j=esbuild

Later, I added gem "cssbundling-rails" to my Gemfile. And after bundle install, I ran

rails css:install:bootstrap

I have such files

// app/javascript/application.js

import './react/Index.jsx'; 

import * as bootstrap from "bootstrap";

// app/javascript/react/Index.jsx

import React from "react";
import ReactDom from "react-dom/client";
import "./Index.css";
import App from "./src/components/App";

const rootElement = document.getElementById("root");
const root = ReactDom.createRoot(rootElement);
root.render(<App \/>);

In app/javascript/react/src/images, I have 2 images. One is .png and the other .jpg. I import both images in Components that a have in a components directory:

Header image:

import React from "react";
import logo from "../images/logo.png";

export default function Navbar() {
  return (
    <div className="" style={{height: "100%"}}>
      <img src={logo} />
    </div>
  );
}

Body image:

import React from "react";
import Banner from "../images/Banner.jpg"

export default function Home(props) {
  return (
    <div>
      <h3>Text</h3>
      <img src={Banner} />
    </div>
  );
}

This is my package.json file:

{
  "name": "app",  
  "private": "true",  
  "dependencies": {
    "@hotwired/stimulus": "^3.1.0",  
    "@hotwired/turbo-rails": "^7.1.3",  
    "@popperjs/core": "^2.11.6",  
    "bootstrap": "^5.2.0",  
    "bootstrap-icons": "^1.9.1",  
    "esbuild": "^0.15.5",    
    "react": "^18.2.0",  
    "react-dom": "^18.2.0",  
    "react-router-dom": "^6.3.0",  
    "sass": "^1.54.4",  
  },  
  "scripts": {. 
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets --loader:.png=file --loader:.jpg=file",  
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",  
  },  
}  

How should I set up a rails 7 app with react as the front-end that uses esbuild as the bundler? I would like to be able to import assets such as images in my react files.