View-Child for the child component returns undefined

Question

I have a Parent Component and a child component which I am trying to access via @ViewChild...This was a legacy code that stopped working after I moved from Angular 5 to 13

Parent

@Component({
  selector: "app-side-panel",
  styleUrls: ["./side-panel.component.scss"],
  template:`<section class="dfnhd">
  <section>
  <app-side-panel-header #headerSection [item]="item"
   [impacts]="impacts"
   (uponEdit)="handleUpdate($event)"></app-side-panel-header>
  </section>
  </section>
`,
})
export class xyz implements OnInit, OnDestroy ,AfterViewInit{
  item;
  
  @ViewChild("headerSection",{static:false}) headerSection:        SidePanelHeaderSectionComponent;
  
constructor(){}

 ngAfterViewInit(){
    console.log(this.headerSection)
  }
 ngOnInit(){
  console.log(this.headerSection)
  item="abc"
  }

Child

export class SidePanelHeaderSectionComponent implements OnInit, OnDestroy {
  @Input() item;

constructor(){}
ngOnInit(){
console.log(this.item)
}

Here this.item is undefined and in the parent this.headerSection is undefined.

Steps tried 1)Tried using set

@ViewChild(SidePanelHeaderSectionComponent) set(sect: SidePanelHeaderSectionComponent){
if(sect){
this.headerSection=sect
}}
private headerSection: SidePanelHeaderSectionComponent;

2)@ViewChild("headerSection") headerSection!: SidePanelHeaderSectionComponent;

3)Using ngAfterViewInit

None worked so far