Wordpress redirects to localhost when navigate to browser sync url in docker

Question

I created a docker compose that runs a wordpress project using php-apache image, mysql image and node image. All works fine.
I have a custom theme that I'm developing and the theme uses webpack to build javascript and scss assets.
I'm trying to setup browser sync to enable hot reload, but when I navigate to the browser sync url (in my case https://localhost:3000) the browser redirects to https://localhost. I've already found a workaround by adding remove_filter('template_redirect', 'redirect_canonical'); line to my functions.php.

I honestly can't understand what happening by adding the code above, can anyone explain me?
Is there any solutions without changing wordpress config and replace all wordpress frontend urls with browser sync url?

This is my webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");

const CONTENT_HASH_LENGTH = 6

const plugins = () => {
    return [
        new MiniCssExtractPlugin({
            filename: `./css/app.min.[contenthash:${CONTENT_HASH_LENGTH}].css`
        }),
        // HOT RELOAD CONFIG
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 3000,
            https: {
                key: "/certs/server.key",
                cert: "/certs/server.crt"
            },
            proxy: 'https://my_wordpress_container_name',
            open: false,
            notify: false,
            reload: false,
            files: [
                './**/*.php',
                './**/*.css',
                './**/*.js',
            ],
        })
    ]
}

module.exports = {
    mode: process.env.NODE_ENV,
    context: path.resolve(__dirname, 'assets'),
    entry: {
        'main': [
            './js/app.js',
            './scss/app.scss'
        ]
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: `./js/app.min.[contenthash:${CONTENT_HASH_LENGTH}].js`,
        clean: true
    },
    module: {
        rules: [
            // JS LOADER
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            // STYLES LOADER
            {
                test: /\.(sass|scss)$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            },
            // CUSTOM FONTS LOADER
            // (only required if loading custom fonts)
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                type: 'asset/resource',
                generator: {
                    filename: './fonts/[name][ext]',
                }
            },
            // IMAGES AND ICONS LOADER
            // (only required if css references image files)
            {
                test: /\.(png|jpg|gif|svg)$/,
                type: 'asset/resource',
                generator: {
                    filename: './images/[name][ext]',
                }
            },
        ]
    },
    plugins: [
        ...plugins()
    ],
    devtool: 'inline-source-map',
    watch: process.env.NODE_ENV === 'development',
    watchOptions: {
        ignored: /node_modules/,
    },
}

Thanks