URL constructor appends '/' at the end of the url

I have a url as follows:

/user/me?feedback=${getFeedback}&showSleepSetting=${showSleepSetting}&expanded=${expandedElement}

The last parameter expandedElement can be empty at times.

I’m passing this to URL() and the resultant is appended with a /. I’m unable to figure out why.

This is what I see:
/user/me?feedback=someFeedback&showSleepSetting=somesetting&expanded=/

Why is the last / being appended and how can I remove that without string manipulation ?

PS: What I want to do is append some query parameters which I’m getting as an object { name: 'something', age: 'something'}. Some parameters are ALREADY attached.

I end up doing something like this:

static get(url, headers, params, cancelToken) {
    let getUrl = new URL(url ? BASE_URL + url : "");

    Object.keys(params).forEach(key =>
      getUrl.searchParams.append(key, params[key])
    );

    const options = { cancelToken, params };
    return this.xhr("GET", getUrl, headers, null, options);
}

But since an extra / is being appended. I get the wrong url at the end

/user/me?feedback=someFeedback&showSleepSetting=somesetting&expanded=/&param1=something

Am I missing something here ?

get(url, headers, params, cancelToken) {
    let getUrl = new URL(url ? BASE_URL + url : "");

    Object.keys(params).forEach(key =>
      getUrl.searchParams.append(key, params[key])
    );

    const options = { cancelToken, params };
    return this.xhr("GET", getUrl, headers, null, options);
}

this.get("https://localhost:8080/user/me?feedback=getFeedback&showSleepSetting=showSleepSetting&expanded=", {}, { name: "Harry" }, "abcqwerty")