Override request-id http header produced by HttpClient in Angular2

I have a simple method that sends an HTTP POST request to my backend API with a use of the HttpClient. The code snippet:

import { HttpClient } from "@angular/common/http";
//other imports...

export class ApiService {
  private readonly apiUrl: Url;
  private readonly bearerToken: string;
  //other fields...

  public constructor(
    initialData: InitialDataService,
    private readonly httpClient: HttpClient
  ) {
    //some logic here
  }
    public sendCommand(command: ICommand): Observable<void> {
        const { __name, ...data } = command;
    
        return this.httpClient.post<void>(this.createCommandUrl(__name), data, {
          headers: {
            authorization: this.bearerToken,
            "request-id": createGuid()
          }
        });
      }

//...
}

When I run the code in the localhost Im able to see the generated Guid in the browser.

When I deploy the changes to Azure App service and I open the developer tools in the browser(tested in Firefox and Chrome), I'm able to see that the request-id is defined as an array of values rather than a single value produced by my method createGuid():

There is some additional value-added. Not sure why it behaves differently in the Cloud...

Is there a way to force the browser to use only the request-id provided by me and remove that extra one that appeared? I'd like to be able to do this for all types of HTTP calls. Cheers