Can't bind to 'dataSource' since it isn't a known property of 'table'.ngtsc(-998002)

Boa noite pessoal, estou tentando criar uma table simples e não consigo, pode me ajudar com oq esta errado? segue o código abaixo: HTML

<table mat-table [dataSource]="dataSource" matSort class="w-100">

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="nome">Nome</th>
    <td mat-cell *matCellDef="let element">
      {{ element.name | uppercase }}
    </td>
  </ng-container>

  <ng-container matColumnDef="idFuncional">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="idFuncional">
      ID Funcional
    </th>
    <td mat-cell *matCellDef="let element">{{ element.idFuncional}}</td>
  </ng-container>

  <ng-container matColumnDef="functionalClass">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="cargo">
      Cargo efetivo
    </th>
    <td mat-cell *matCellDef="let element">
      {{ element.functionalClass | uppercase }}
    </td>
  </ng-container>

  <ng-container matColumnDef="periodo">
    <th mat-header-cell *matHeaderCellDef>
      Periodo
    </th>
    <td mat-cell *matCellDef="let element">
      {{ element.initialDate | uppercase | date: 'dd/MM/yyyy'}} até {{ element.finalDate | uppercase | date:
      'dd/MM/yyyy'}}
    </td>
  </ng-container>
  <ng-container matColumnDef="situacao" class="mat-column-situation">
    <th mat-header-cell *matHeaderCellDef>
      Registro
    </th>
    <td mat-cell *matCellDef="let element" class="text-start">
      {{ element.status === "A"? "ATIVO" : "INATIVO" }}
    </td>
  </ng-container>
  <ng-container matColumnDef="actions">
    <th mat-header-cell *matHeaderCellDef>Ações</th>
    <td mat-cell *matCellDef="let element">
      <mat-icon aria-hidden="false" [matTooltip]="'Visualizar'">
        remove_red_eye
      </mat-icon>
    </td>

  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  <tr class="mat-row" *matNoDataRow>
    <td class="no-data-row" colspan="12">
      <div class="ps-3">Nenhum registro localizado.</div>
    </td>
  </tr>
</table>

TS

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-produto',
  templateUrl: './produto.component.html',
  styleUrls: ['./produto.component.scss']
})
export class ProdutoComponent implements OnInit {
  data = [
    { name: "Emerson", idFuncional: 123456, functionalClass: "Tecnico", situacao: "Ativo" }];

  dataSource: MatTableDataSource<any> = new MatTableDataSource();

  public displayedColumns: string[] = [
    "name",
    "idFuncional",
    "functionalClass",
    "situacao",
  ];

  constructor() { }

  ngOnInit(): void {
    this.dataSource = new MatTableDataSource<ColumnsHeader>();
  }

}

export interface ColumnsHeader {
  name: string;
  idFuncional: number;
  functionalClass: string;
  situacao: string;
}

App.module

import { CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProdutoComponent } from './features/produto/produto.component';
import { UserComponent } from './features/user/user.component';
import { VendaComponent } from './features/venda/venda.component';
import { LoginComponent } from './features/login/login.component';
import { HeaderComponent } from './features/header/header.component';
import { FooterComponent } from './features/footer/footer.component';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';


@NgModule({
  declarations: [
    AppComponent,
    ProdutoComponent,
    UserComponent,
    VendaComponent,
    LoginComponent,
    HeaderComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatTableModule,
    MatToolbarModule,
    MatIconModule,
    MatTooltipModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule { }