A função writeValue do ControllValueaccessor está rebendo o valor null!

Preciso de um help aqui ! Estou implementando a interface controllValueaccessor do angular está tudo funcionando , só uma coisa não funciona quando eu seto o falor do controle de formulário ele sempre vem null no meu componente, não sei oque pode estár acontecendo

import { Component, Input, ViewChildren, QueryList, forwardRef } from '@angular/core';
import { ControlValueAccessor , NG_VALUE_ACCESSOR} from '@angular/forms';
import { PickListItemDirective } from './Diretivas/pick-list-item.directive';

@Component({
  selector: 'pick-list',
  templateUrl: './pick-list.component.html',
  styleUrls: ['./pick-list.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => PickListComponent),
      multi: true
    }
  ]
})
export class PickListComponent implements ControlValueAccessor {

  @Input()defaultItens: Array<any>;
  @Input()selecionados: Array<any>;
  selecionado : PickListItemDirective;
  @ViewChildren(PickListItemDirective) itens : QueryList<PickListItemDirective>;
  disabled : boolean;
  constructor() {
    this.selecionados =[];
   }

    set value(value:Array<any>){
      if(value !== undefined && this.value !== value){
        this.selecionados = value;
        this.onChange(value);
        this.onTouched(value); 
      }
    }
    get value():Array<any>{
      return this.selecionados;
    }

  onChange: any =  () => {};
  onTouched: any =  () => {};

  writeValue(obj: any): void {
    debugger;
    this.value = obj;
  }
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
  setDisabledState?(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  mudarDeQuadro(){
    if(this.selecionado){
      if(this.selecionado.quadro == '1'){
        this.passarParaQuadro2(this.selecionado.id);
      }else{
        this.passarParaQuadro1(this.selecionado.id);
      }
      this.selecionado = null;
    }

  }

  selecionar(event){
    if(this.selecionado == event){
      this.mudarDeQuadro();
    }else{
      this.limpaselecao(event);
      this.selecionado = event;
    }
  }

  passarParaQuadro2(position:number){
    this.value = [...this.value,this.defaultItens[position]];
    this.defaultItens.splice(position,1);
  }

  passarParaQuadro1(position:number){
    this.defaultItens = [...this.defaultItens,this.value[position]];
    this.value.splice(position,1);
    this.value = [...this.value];
  }

  passaTudoParaQuadro2(){
    if(this.defaultItens.length > 0){
      this.value = [...this.value,...this.defaultItens];
      this.defaultItens = [];
    }
  }

  passaTudoParaQuadro1(){
    if(this.selecionados.length > 0){
      this.defaultItens = [...this.defaultItens,... this.value];
      this.value = [];
    }
  }

  limpaselecao(item){
    this.itens.forEach((ele : PickListItemDirective)=>{
      if(item !== ele){
        ele.tirarSelecao();
      }
    });
  }
}

esse é o html

<pick-list formControlName="areas" [defaultItens]="defaultItens"></pick-list>
            {{ agendasForm.value | json }}

aqui é onde eu seto os valores no form

this.agendasForm = this.fb.group({
      id: [''],
      tipo: ['', Validators.required],
      nomeEvento: '',
      dataInicial: ['', Validators.required],
      dataFinal: ['', Validators.required],
      horarioInicial: ['', Validators.required],
      horarioFinal: ['', Validators.required],
      banner: ['', Validators.required],
      bannerName: ['', Validators.required],
      pais: ['', Validators.required],
      local: ['', Validators.required],
      conteudo: ['', Validators.required],
      dataPublicacao: ['', Validators.required],
      isActive: ['', Validators.required],
      pesquisa: [''],
      pesquisaId: [''],
      dataInicialPesquisa: [''],
      dataFinalPesquisa: [''],
      tags: [''], 
      areas:[['novo', 'teste']]
    },
      {
        validators: [
          dateGreaterThan('dataInicial', 'dataFinal')
        ]
      }
    );
  }