How to avoid decoding the queryParams in Angular using CustomSerializer

I am accessing Angular application with below URL queryParams strategy

When I try to access http://localhost:4200/test?url=http://abc/item%2F2/3, Angular is encoding queryParams hence I have used CustomUrlSerializer to decode them back as below but I wanted to retain the same queryParam without encoding or decoding

But currently the url decoded and shows as http://localhost:4200/test?url=http://abc/item/2/3 in the browser URL

But I want to URL to remain same i.e. http://localhost:4200/test?url=http://abc/item%2F2/3

Can some one provide me the better solution to handle this case?

import {UrlSerializer, UrlTree, DefaultUrlSerializer} from '@angular/router';

export class MyUrlSerializer implements UrlSerializer {
    public ds = new DefaultUrlSerializer();

    parse(url: any): UrlTree {
        return this.ds.parse(url);
    }

    serialize(tree: UrlTree): any {
        const serializedUrl = this.ds.serialize(tree);
        return serializedUrl
            .replace(/%40/gi, '@')
            .replace(/%3A/gi, ':')
            .replace(/%24/gi, '$')
            .replace(/%2C/gi, ',')
            .replace(/%3B/gi, ';')
            .replace(/%20/gi, '+')
            .replace(/%3D/gi, '=')
            .replace(/%3F/gi, '?')
            .replace(/%2F/gi, '/');
    }
}

from How to avoid decoding the queryParams in Angular using CustomSerializer