Unable to hotReload on custom nextjs 12 server (unable to connect /ws://localhost:3000/_next/webpack-hmr)

Question

I create a custom server my next js code with expressjs. everything is working find expect for hot-reload.

here is the code for my custom server.

app.prepare().then(() => {
  const server = express();
  server.all("*", (req: Request, res: Response) => {
    return handle(req, res);
  });
  server.listen(port, (err?: any) => {
    if (err) throw err;
    console.log(`> Ready on localhost:${port} - env ${process.env.NODE_ENV}`);
  });

}).catch((e)=>{
  console.error(e);
  process.exit(1);
})
    

i checked the console in the browser and turns out it is not being connected to WebSocket at _next/webpack-hmr so I did a bit of research and found out from here, that it is a issue in nextjs 12 and the workaround is to create a proxy. so I create one with http-proxy-middleware. still no luck.

const proxy = createProxyMiddleware({
    ws:true,
    target:'http://localhost:3000'
  })
  server.use('/_next/webpack-hmr', proxy)

any help would be great thanks