Angular material pagination is not working with API data - angular-material

Question

I have created an api using Web APi in .Net and data is coming from SQL Server and displayed on FrontEnd using Angular, i have used Angular material pagination but its not working. please let me know if there is wrong.I have created an api using Web APi in .Net and data is coming from SQL Server and displayed on FrontEnd using Angular, i have used Angular material pagination but its not working. please let me know if there is wrong.
comp.ts
import { Component, OnInit,ViewChild } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import {GetdataService} from './getdata.service';
import { ActivatedRoute, Router } from '#angular/router';
import { MsalService } from '#azure/msal-angular';
import { Loader } from '#googlemaps/js-api-loader';
import { FormControl } from '#angular/forms';
import { styles } from './mapstyles';
import {MatPaginator} from '#angular/material/paginator';
import {MatTableDataSource} from '#angular/material/table';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
import { NgxSpinnerService } from "ngx-spinner";
import { MatSort } from '#angular/material/sort';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit{
userdata: any;
#ViewChild(MatPaginator,{static:true}) paginator: MatPaginator;
#ViewChild(MatSort) sort: MatSort;
constructor(private service:GetdataService, private authService: MsalService, private http: HttpClient, private msalService: MsalService,private route: ActivatedRoute, private router: Router,private SpinnerService: NgxSpinnerService) {}
ngOnInit(): void {
this.userdata.paginator = this.paginator;
}
Model='';
searchMachine(){
this.http.get("https://localhost:5001/api/Machines/"+this.Model.trim()).subscribe(data =>{
console.log(data)
this.userdata=data;
this.userdata.paginator = this.paginator;
})
}
}
comp.html
<table class="styled-table" >
<thead>
<tr>
<th>Machine ID</th>
<th>Model</th>
<th>Machine Type</th>
<th>Serial</th>
<th>User ID</th>
<th>Created Date</th>
<th>Modified Data</th>
<th>Shared Machines</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let group of userdata">
<td>{{group.machineID}}</td>
<td>{{group.model}}</td>
<td>{{group.machineType}}</td>
<td>{{group.serial}}</td>
<td>{{group.userID}}</td>
<td>{{group.createdDate}}</td>
<td>{{group.modifieddate}}</td>
<td>{{group.isShared}}</td>
</tr>
</tbody>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>