Angular 8 - Rearrange dynamically created components via drag and drop

Question

I am currently creating a dynamic questionnaire builder where the user can choose from a list of input fields(e.g textbox, checkbox). I am creating the input fields dynamically via ComponentFactoryResolver. My problem is when I rearrange the created components via drag and drop the components doesnt rearrange themselves properly.

I tried following this cdkDropList with ng-template on dynamic component list do'snt work. but we have the same issue.

I am creating the components like this public addField(questionnaireComponent: any): void {

    const formFieldComponentFactory = 
    this.componentFactoryResolver.resolveComponentFactory(questionnaireComponent);
    this.componentRef = 
    this.formQuestionnaireRef.createComponent(questionnaireFieldComponentFactory);
    this.localDragRef.push(this.componentRef.instance.dragEnable(this.dragDrop));
    this.droplistREf.withItems(this.localDragRef);
  }

subscribe when the component is dropped

       this.droplistREf = this.dragDrop.createDropList(this.fieldList);
       this.droplistREf.dropped.subscribe(a => {
         // cant get the componentRef here to rearrange component
       });
     } 

my code that rearrange the position of dynamic components

 public rearrangeQuestionnairePosition(): void {
    this.formQuestionnaireRef.move(this.componentInstance.hostView, componentPosition);
  }

the problem is I cant use the rearrangeQuestionnairePosition function to rearrange the dynamically created components since I dont have the instance of the componentRef

IM using the drag and drop of angular material btw