Can't activate the placeholder and preview programmatically

[NathanBraslavski]

I am trying to add placeholder and template using

dragRef
          .withPlaceholderTemplate(placeholder)
          .withPreviewTemplate(preivew);

But I had no luck so far.
I was trying to reverse engineer the source code and it looks I am doing the same.

I am defining the placeholder and preview elements before start event

      dragRef.beforeStarted.subscribe(() => {
        const placeholder = {
          template: this.placeholderRef,
          context: undefined,
          viewContainer: this.viewContainerRef,
        };
        const preivew = {
          template: this.previewRef,
          context: undefined,
          viewContainer: this.viewContainerRef,
        };

and getting the template with ViewChild

  @ViewChild('preview', { read: TemplateRef })
  previewRef: TemplateRef<HTMLElement>;

  @ViewChild('placeholder', { read: TemplateRef })
  placeholderRef: TemplateRef<any>;

Here is a link to the stackblitz project
https://stackblitz.com/edit/material-drag-drop-js?file=src%2Fapp%2Fcdk-drag-drop-custom-preview-example.ts