angular form is not detecting the value changing

I don't know why the form is not working! the input does not change the values in the form.

and the valueChanges is not detecting anything. any help?

applied on stackblitz: https://stackblitz.com/edit/angular-ivy-w68v69?file=src/app/app.component.ts

import { Component, VERSION } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";

@Component({
  selector: "my-app",
  template: `
    <form [formGroup]="form">
      <input
        FormControlName="patientName"
        placeholder="Enter Patient Name ..."
      />
    </form>
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  form: FormGroup;

  ngOnInit() {
    this.form = new FormGroup({
      patientName: new FormControl("")
    });

    this.form.get("patientName").valueChanges.subscribe(x => console.log(x));

    this.form.valueChanges.subscribe(next => {
      console.log("valueChanges didtted");
      console.log(next);
    });

    console.log("form created");
  }
}