Missing Transparent Header when try to integrate React.js application with open telemetry

I am try to Integrate my React application with OpenTelemetry. I added trace.ts file and in the console the span is printing without any problem. But in the http header transparent header not available. So, in the backend (I have Quarkus backend) the parent Id not reserved. Can some one help me to solve this proble. (Now this is working. In the below I also gave the working code)

trace.ts file

/* document-load.ts|js file - the code snippet is the same for both the languages */
import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { Resource } from '@opentelemetry/resources';;
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';

// Trace provider (Main application trace)
const provider = new WebTracerProvider({
  resource: new Resource({
    "service.name": "frontend",
  })
});

const fetchInstrumentation = new FetchInstrumentation({});

fetchInstrumentation.setTracerProvider(provider);

provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()))

provider.register({
    // Changing default contextManager to use ZoneContextManager - supports asynchronous operations - optional
    contextManager: new ZoneContextManager(),
});

// Registering instrumentations
registerInstrumentations({
  instrumentations: [
    new DocumentLoadInstrumentation(),
    new UserInteractionInstrumentation(),
    new XMLHttpRequestInstrumentation({
      propagateTraceHeaderCorsUrls: [
        "http://localhost:8081"
      ]
    })
  ],
});

const tracer = provider.getTracer('react-tracer')

log of the browse

network tab. There no transparent header

In the backend (quarkus bakend) , parentId is not available

Can some one help me to solve this.

Edit

Not this is working...

import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { Resource } from '@opentelemetry/resources';
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
import { W3CTraceContextPropagator, CompositePropagator, W3CBaggagePropagator } from "@opentelemetry/core";
import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';

// Trace provider (Main application trace)
const provider = new WebTracerProvider({
  resource: new Resource({
    "service.name": "govi-ai-frontend",
  })
});


const fetchInstrumentation = new FetchInstrumentation({});

fetchInstrumentation.setTracerProvider(provider);

provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()))

provider.register({
    // Changing default contextManager to use ZoneContextManager - supports asynchronous operations - optional
    contextManager: new ZoneContextManager(),
    propagator: new CompositePropagator({
      propagators: [new W3CBaggagePropagator(), new W3CTraceContextPropagator()]
    })
});

// Registering instrumentations
registerInstrumentations({
  tracerProvider: provider,
  instrumentations: [
    getWebAutoInstrumentations({
      '@opentelemetry/instrumentation-fetch': {
        propagateTraceHeaderCorsUrls: /.*/,
        clearTimingResources: true,
        applyCustomAttributesOnSpan(span) {
          span.setAttribute("app.synthetic_request", false);
        }
      }
    }),
    new DocumentLoadInstrumentation(),
    new UserInteractionInstrumentation(),
    new XMLHttpRequestInstrumentation()
  ],
});

const tracer = provider.getTracer('react-tracer')

I think I got the issue, in your first example you have will not work

new XMLHttpRequestInstrumentation({
      propagateTraceHeaderCorsUrls: [
        "http://localhost:8081"
      ]
    })

but actually this thing expects regex and does not add the header into the request, so regex like that will do the trick:

 new XMLHttpRequestInstrumentation({
          propagateTraceHeaderCorsUrls: [
            new RegExp('localhost:8081')
          ]
        })