Programatically Update Telerik Report Viewer Properties in Angular Project

I am developing an Angular 12.2 application which has a Telerik Angular Report Viewer (v12.21.326). My Angular template is as follows:

<tr-viewer #reportViewer
            [reportSource]="{ report: 'report.trdp', parameters: {} }"
            [containerStyle]="viewerContainerStyle"
            [pageMode]="'SINGLE_PAGE'"
            [parametersAreaVisible]="false"
            [scale]="1.0"
            [scaleMode]="'FIT_PAGE_WIDTH'"
            [serviceUrl]="'http://localhost:12345/api/reports'"
            [templateUrl]="'http://localhost:12345/api/reports/resources/templates/telerikReportViewerTemplate.html'"
            [viewMode]="'INTERACTIVE'"
            style="height: 100%;">
</tr-viewer>

I set some default values to my tr-viewer object as I get errors if not.

I am building this single component as a Web Component (Angular Element) and have 3 x @Input() for the host application to pass in the following:

1. report
2. serviceUrl
3. templateUrl

My typescript is as follows:

import { AfterViewInit, ChangeDetectorRef, Component, Input, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
import { TelerikReportViewerComponent } from '@progress/telerik-angular-report-viewer';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [
    './app.component.css',
    '../assets/reportviewer.css',
    '../assets/kendo.blueopal.min.css',
    '../assets/kendo.common.min.css',
  ],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit {

  @ViewChild('reportViewer', { static: true }) reportViewer!: TelerikReportViewerComponent;

  @Input() report!: string;
  @Input() serviceUrl!: string;
  @Input() templateUrl!: string;

  public viewerContainerStyle = {
    position: 'relative',
    width: '100%',
    height: '100%',
    ['font-family']: 'ms sans serif'
  };

  constructor(private cdr: ChangeDetectorRef) { }

  ngAfterViewInit(): void {
    this.updateReportViewer();
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.report || changes.reportServerPath || changes.templatePath) {
      console.log(`ngOnChanges called. changes: `, changes);
      this.updateReportViewer();
    }
  }

  updateReportViewer(): void {
    try {

      this.reportViewer.serviceUrl = this.serviceUrl;
      this.reportViewer.templateUrl = this.templateUrl;

      const reportSource = {
        report: 'report.trdp',
        parameters: {}
      };
      this.reportViewer.setReportSource(reportSource as any);

      // Trigger change detection
      this.cdr.detectChanges();
    } catch (error) {
      this.handleError(error);
    }
  }

  handleError(error: any): void {
    console.error('Error updating report viewer:', error);
    alert(`Error: ${error.message || error}`);
  }

}

I build the web component and run it in the host application. If I set the default values in the html template for the reportSource, serviceUrl and templateUrl to valid values the report displays in the host component fine. If I set the report @Input() the report viewer will refresh to display the report passed in. However, no matter what I try I cannot get the serviceUrl and templateUrl values to change. Also, curiously, when I inspect the console.logs after this.reportViewer has been updated, the properties never appear to change from the default values set.

How should I be programatically updating an existing tr-viewer object please?