how to use client context to start child spans at server side

Question

from an angular client i have injected context and sending through headers

 try {
      const ctx = api.trace.setSpan(
        api.context.active(),
        parentSpan
      );
      const tracer = trace.getTracerProvider().getTracer('Ui-Service');
      let span = tracer.startSpan('start_Client_spans', undefined, ctx);
      const carrier:{traceparent:string} = {
          traceparent:""
        };
      const propagator = new W3CTraceContextPropagator();
      propagator.inject(
        api.trace.setSpanContext(api.context.active(), span.spanContext()),
        carrier,
        api.defaultTextMapSetter,
      )
      const clone = req.clone({
        headers: req.headers
          .set('ot-tracer-traceid' ,carrier.traceparent)
      });

      span.end()
      return clone;
    } catch (e) {
      console.log(e)
      throw e
    }
  }

server side code below here the context is extracted from headers and trying to be injected to start further spans at server side so that client request is parent and server requests are child spans of the same trace id but currently both server and client are having separate trace ids

    const carrier = req.headers["ot-tracer-traceid"]
    const propagator = new W3CTraceContextPropagator();
    if(carrier?.length>0){
      const clientContext = propagator.extract(
        api.context.active(),
        carrier,
        api.defaultTextMapGetter
      );

const newTracer = api.trace.getTracer("test","1.0.0")
// create server span using the client context
//below code snippet does create spans but individual spans , but i am expecting them to use the client context 
const serverSpan = newTracer.startSpan('operationName', undefined, clientContext);
console.log(newTracer);

    }

can some one hint me where am i getting wrong ?