Propagation not working with xhr and fetch

[000bravvo]

I'm using Boomerang otel plugin in my front-end and boomerang otel in my backend. Each network call is getting traced and visible in jaeger-ui but propagation is not happening. Service name is same in both sides.
Below is my Boomerang OTEL plugin configuration.
BOOMR.init({
beacon_url: 'http://localhost:8997/beacon',
ResourceTiming: {
enabled: true,
clearOnBeacon: true
},
AutoXHR: {
alwaysSendXhr: true
},
instrument_xhr: true,
History: {
enabled: true
},
OpenTelemetry: {
samplingRate: 1.0,
corsUrls: '',
collectorConfiguration: {
url: 'http://localhost:4318/v1/traces',
method:'POST',
headers: {},
concurrencyLimit: 10,
},
plugins_config: {
instrument_fetch: {
enabled: true,
clearTimingResources: false,
path: "",
applyCustomAttributesOnSpan: null, //A method with the following structure: (span: Span, request: Request) => { },
ignoreUrls: [],
propagateTraceHeaderCorsUrls: ['']
},
instrument_xhr: {
enabled: true,
path: "",
applyCustomAttributesOnSpan: null, //A method with the following structure: (span: Span, xhr: XMLHttpRequest) => { },
propagateTraceHeaderCorsUrls: ['*'],
ignoreUrls: [],
clearTimingResources: false,
},
instrument_document_load: {
enabled: true,
path: "",
},
instrument_user_interaction: {
enabled: true,
path: "",
}
},
commonAttributes: {
"application": "UI",
"stage": "dev"
},
serviceName: "UI_BO_TEST",
propagationHeader: "TRACE_CONTEXT"
},
});
});