node express Server does not serve compressed static files with brotli and gzip compression

I have react app with SSR implementation using react loadable SSR addon npm package.

I am following this tutorial A Tale of Brotli Compression to implement brotli and gzip compression

I can see .br and .gzip compressed files in build folder. but these file do not serve when I check on localhost, I am not sure whether it is because I am checking on localhost development server or something else.

Followed below steps:

webpackConfig/plugins.js

const CompressionPlugin = require('compression-webpack-plugin');
const BrotliPlugin = require('brotli-webpack-plugin');

  new CompressionPlugin({
    filename: '[path].gz[query]',
  }),
  new BrotliPlugin({
    asset: '[path].br[query]',
    test: /\.(js|css|html|svg)$/,
    threshold: 10240,
    minRatio: 0.8,
  }),

server/index.js

import expressStaticGzip from 'express-static-gzip';
import path from 'path';

const server = express();
server.use(cors());
server.use(bodyParser.json());
server.use(bodyParser.urlencoded({ extended: false }));
server.use(cookieParser());
server.use(
  '/static*',
  // '/build/client',
  expressStaticGzip(path.join(paths.clientBuild, paths.publicPath), {
    enableBrotli: true,
    orderPreference: ['br', 'gz'],
    setHeaders(res) {
      res.setHeader('Content-Encoding', 'br');
      res.setHeader('Cache-Control', 'public, max-age=31536000');
    },
  })
);

server.use(
  '/static*',
  expressStaticGzip(path.join(paths.serverBuild, paths.publicPath), {
    enableBrotli: true,
    orderPreference: ['br', 'gz'],
    setHeaders(res) {
      res.setHeader('Content-Encoding', 'br');
      res.setHeader('Cache-Control', 'public, max-age=31536000');
    },
  })
);
server.use(compression());

start.js

// app.use('/static', express.static(paths.clientBuild));

commented above code in start.js.

In the browser, I see the same size of static JS and CSS files as before.

UPDATE:

After trying a few things I understood that I need to make changes in start.js and not server/index.js

Therefore to test if things are working as expected I added a middleware to test specific use case:

 app.get('/static*', function (req, res, next) {
    console.log('req buncle url', req.url)
     req.url = req.url + '.gz';
    res.set('Content-Encoding', 'gzip');
    res.set('Content-Type', 'text/javascript');
    next();
  });

The above code worked as expected, I got compressed bundle.js file in a browser. but same does not work with express-static-gzip.

FYI: My build folder is on root and has below structure:

build/client/static/