Understanding how react-scripts start work

So i was moving my code to esbuild to fasten my builds.

When I do so, my website looks weird (when I run using esbuild).

I was comparing the diff between index.html of the webpack and esbuild and noticed that webpack one have this

  <script src="/static/js/bundle.js"></script><script src="/static/js/vendors~main.chunk.js"></script><script src="/static/js/main.chunk.js"></script><script src="/static/js/bundle.js"></script><script src="/static/js/vendors~main.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>

Which is missing in esbuild.

This is my esbuild

// build.js
const esbuild = require('esbuild');
const inlineImage = require('esbuild-plugin-inline-image');
const { sassPlugin } = require('esbuild-sass-plugin');
const svgrPlugin = require('esbuild-plugin-svgr');

esbuild
  .serve(
    {
      servedir: 'public',
      port: 3000,
    },
    {
      entryPoints: ['./src/index.tsx'],
      outfile: './public/assets/app.js',
      minify: true,
      bundle: true,
      define: {
        'process.env.NODE_ENV': '"dev"',
        'process.env.REACT_APP_BACKEND_URL': '"https://something.xyz.ai/"',
        'process.env.REACT_APP_BACKEND_WSS': '"wss://something.xyz.ai/ws/"',
        'process.env.REACT_APP_BACKEND_URL_STAGE': '"https://stage-new.something.xyz.ai/"',
        'process.env.REACT_APP_HELP_AND_SUPPORT_URL': '"https://docs.something.xyz.ai/"',
      },
      loader: {
        '.js': 'jsx',
        '.ts': 'tsx',
      },
      plugins: [svgrPlugin({ exportType: 'named' }), inlineImage(), sassPlugin()],
    },
  )
  .catch(() => process.exit(1));

I am curious, how does react put /static/js/bundle.js and other scripts and how can I make esbuild do the same?

from Understanding how react-scripts start work