p-calendar control present in DOM but not shown in UI when using in turbo table

Question

I am using primeNg version "11.4.5" and turbo table to show/edit records. I need to use calendar when user edit the row. Therefore I am using <p-calendar>. This issue is the control is created in DOM but not seen in UI.

My code:

<td>
<p-cellEditor>
    <ng-template pTemplate="input">
        <div fxLayout="row">
            <div fxFlex="85">
                <div class="inline-block">
                    <p-calendar selectionMode="range"
                                  dataType="string" dateFormat="mm/dd/yy"                                      
                                  formControlName="DateRangeCtrl">
                    </p-calendar>
                </div>
            </div>
         </div>
     </ng-template>
     <ng-template pTemplate="output">
         //some values to show
     </ng-template>
 </p-cellEditor> 

I have already imported CalendarModule in app.module.ts.

Additional: In console, I was getting error: core.js:6210 ERROR Error: No value accessor for form control with name: 'DateRangeCtrl'. Then I added ngDefaultControl attributes within . In doing so, error that was on console is gone but still calendar is not visible in UI but present in DOM.