Console error <ng-select>: No value accessor for form controll with name: - angular6

Question

I have added ng-select in my project for multiselect-searchable-grouping dropdown. I have followed the steps from https://ng-select.github.io/ng-select#/grouping, but unfortunately getting:
ERROR Error: No value accessor for form control with name: 'optProject'
I am using angular 6
Please see my code as below:
I have added NgSelectModule to module.ts
html
<ng-select formControlName="optProject"
[items]="projects"
bindLabel="title"
bindValue="id"
groupBy="subprojects"
[multiple]="true"
[(ngModel)]="selectedProjects">
<ng-template ng-optgroup-tmp let-item="item">
{{item.title}}
</ng-template>
<ng-template ng-option-tmp let-item="item">
{{item.title}}
</ng-template>
</ng-select>
component.ts
import { FormGroup, FormControl} from '#angular/forms';
.
.
.
public selectedProjects;
public projects;
ngOnInit() {
this.selectedProjects = [];
this.projects = [
{
id: 'p1',
title: 'Project A',
subprojects: [
{ title: 'Subproject 1 of A', id: 's1p1' },
{ title: 'Subproject 2 of A', id: 's2p1' },
]
},
{
id: 'p2',
title: 'Project B',
subprojects: [
{ title: 'Subproject 1 of B', id: 's1p2' },
{ title: 'Subproject 2 of B', id: 's2p2' },
]
}
]
}
projectForm = new FormGroup({
optProject: new FormControl(null),
});
While searching on Google, I found that this kind of error occurs while adding formCorntrolName to labels/div instead of input controls. But is the case here, with ng-select ? Whats wrong with my code...! Thanks in advance...
Just to add, I have added ngDefaultControl to ng-select, because I found: Third party controls require a ControlValueAccessor to function with angular forms (What is ngDefaultControl in Angular?), but still no luck!!! The error goes but no content display within <ng-select>