Issues regarding Updating values using CRUD operations in angular 17 with JSON Server

When I want to update the records stored in an API, the route is passed via ActivatedRoute and is available in the file, but the records are not showing up in the HTML where I want the user to update it. I have attached both files for reference below.

update-car.component.html

<div class="container">
  <form [formGroup]="carUpdateForm" role="form" (ngSubmit)="onClickSubmit(carUpdateForm.value)" class="row g-3">
    <div class="form-group col-md-6"> 
      <label>ID</label>
      <input type="number" class="form-control" formControlName="id" placeholder="Enter ID">
    </div>

    <div class="form-group col-md-6">
      <label>Manufacturer</label>
      <input type="text" class="form-control" formControlName="manufacturer" placeholder="Enter Manufacturer Name">
    </div>

    <div class="form-group col-md-6">
      <label>Model Name</label>
      <input type="text" class="form-control" formControlName="modelName" placeholder="Enter Model Name">
    </div>

    <div class="form-group col-md-6">
      <label>Category</label>
      <input type="text" class="form-control" formControlName="category" placeholder="Enter Category">
    </div> 

    <div class="form-group col-md-6">
      <label>Drivetrain</label>
      <input type="text" class="form-control" formControlName="drivetrain" placeholder="Enter Drivetrain">
    </div>

    <div class="form-group col-md-6">
      <label>Engine</label>
      <input type="text" class="form-control" formControlName="engine" placeholder="Enter Engine">
    </div>

    <div class="form-group col-md-6">
        <label>Transmission</label>
        <input type="text" class="form-control" formControlName="transmisson" placeholder="Enter Transmission">
    </div>

    <div class="form-group col-md-6">
        <label>Max Power</label>
        <input type="number" class="form-control" formControlName="maxPower" placeholder="Enter Amont">
    </div>

    <div class="form-group col-md-6">
        <label>Max Torque</label>
        <input type="number" class="form-control" formControlName="maxTorque" placeholder="Enter Amont">
    </div>

    <div class="form-group col-md-6">
        <label>Kerb Weight</label>
        <input type="number" class="form-control" formControlName="kerbWeight" placeholder="Enter Amont">
    </div>

    <div class="col-12">
      <button [disabled]="!carUpdateForm.valid" type="submit" class="btn btn-primary">Update Car</button>
    </div>
</form>

</div>

update-car.component.ts

import { Component } from '@angular/core';
import { CarsService } from '../../../service/cars.service';
import { ToastrService } from 'ngx-toastr';
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-update-car',
  templateUrl: './update-car.component.html',
  styleUrl: './update-car.component.scss'
})
export class UpdateCarComponent {
  carUpdateForm!: FormGroup;

  updateArray: any;
  routeID: any;

  constructor(private builder: FormBuilder, private carService: CarsService, private route: ActivatedRoute, private toastr: ToastrService) { }

  ngOnInit(): void {
    this.route.paramMap.subscribe((params) => {
      this.routeID = params.get('id');
      console.log(this.routeID);
      this.carService.getSingleCarInfo(this.routeID).subscribe((res) => {
        this.updateArray = res;
        this.carUpdateForm.patchValue(this.updateFormValues());
      });
    });

    this.carUpdateForm = new FormGroup({
      id: new FormControl(this.updateArray.id),
      manufacturer: new FormControl(this.updateArray.manufacturer),
      modelName: new FormControl(this.updateArray.modelName),
      category: new FormControl(this.updateArray.category),
      drivetrain: new FormControl(this.updateArray.drivetrain),
      engine: new FormControl(this.updateArray.engine),
      transmisson: new FormControl(this.updateArray.transmisson),
      maxPower: new FormControl(this.updateArray.maxPower),
      maxTorque: new FormControl(this.updateArray.maxTorque),
      kerbWeight: new FormControl(this.updateArray.kerbWeight)
    });
  }

  onClickSubmit(formdata: any) {
    this.carService.updateCar(this.routeID, formdata).subscribe((val) => {
      this.toastr.success('Car updated successfully');
      setTimeout(() => {
        location.href = '/'
      }, 3000);
    });
  }

  updateFormValues() {
    return {
      id: this.updateArray.id,
      manufacturer: this.updateArray.manufacturer,
      modelName: this.updateArray.modelName,
      category: this.updateArray.category,
      drivetrain: this.updateArray.drivetrain,
      engine: this.updateArray.engine,
      transmisson: this.updateArray.transmisson,
      maxPower: this.updateArray.maxPower,
      maxTorque: this.updateArray.maxTorque,
      kerbWeight: this.updateArray.kerbWeight
    }
  }
}

Tried every possible way but still not fruitful. I am using angular 17 BTW with SCSS and SSR On.
Please help me in solving this issue.