NextJs Multi Zones Shared Header

I have 2 apps admin-shell and delivery-management and i am using Multi Zones to handle that in NextJs.

Both these applications use a shared header with navigation links but i'm facing problem navigating from one zone to other zone.

Admin-Shell running on port 4201 with next.config.js file

module.exports = {
basePath: '/main',
rewrites: async() => {
    return [{
            source: '/delivery-management',
            destination: `http://localhost:4202/delivery-management`,
            basePath: false,
        },
        {
            source: '/delivery-management/:path*',
            destination: `http://localhost:4202/delivery-management/:path*`,
            basePath: false,
        },
    ];
},
};

Delivery-Management running on port 4202 with next.config.js file

module.exports = {
basePath: '/delivery-management',
rewrites: async() => {
    return [{
            source: '/main',
            destination: `http://localhost:4201/main`,
            basePath: true,
        },
        {
            source: '/main',
            destination: `http://localhost:4201/main/:path*`,
            basePath: true,
        },
    ];
},
};

The header is a separate shared module with navigation bar. I'm having a problem with relative links. Consider following links:

1- /main/main-dashboard

2- /delivery-management

When i'm in Delivery-Management application it appends the basePath with links like this

"/delivery-management/main/main-dashboard" due to which the page doesnt load. It should be absolute like "/main/main-dashboard".

What could be the possible solution for this? How can i use absolute urls instead of relative urls with Next/Link.