Why am I getting Content child as undefined?

Question

Here is the child component html

<div #hooksContainer style="display: grid;overflow: auto;max-height: 35vh;border: 1px solid black;border-radius: 5px;padding: 10px;">
  <!-- Input Var {{inputVar.data}} -->
  <ng-content>
    <!-- this is space for any content passed from outside -->
  </ng-content>
  <ng-content select="header">
    <!-- this is space for any content passed from outside with tag header-->
  </ng-content>
</div>

and this is the component file for child

import { AfterContentChecked, AfterContentInit, ChangeDetectorRef, Component, ContentChild, ElementRef, Input } from '@angular/core';

@Component({
  selector: 'app-hook-cycles',
  templateUrl: './hook-cycles.component.html',
  styleUrls: ['./hook-cycles.component.scss']
})
export class HookCyclesComponent implements   AfterContentInit, AfterContentChecked{
  @ContentChild("header")
  public headerContent!: ElementRef;

  @Input()
  public inputVar!: { data: string, otherData: { isTrue: boolean, check: string } };
  constructor(private cdref: ChangeDetectorRef) {
  
  }
  ngAfterContentChecked(): void {
    console.log("Content Child headerContent: ", this.headerContent);
  }
  ngAfterContentInit(): void {
    console.log("Content Child headerContent: ", this.headerContent);
  }
}

and this is the app component html file

<div style="padding-top: 25px;">
  <h1 style="text-align: center;">App Works!!</h1>
  </div>
<app-hook-cycles>something sent from outside<header>[Header] this was too</header></app-hook-cycles>

and this is the result of console.log [consoleLog]: https://i.stack.imgur.com/4N1tb.png

line 31 is inside ngAfterContentInit

line 27 is inside ngAfterContentChecked