Why doesn't my Angular Material table update when the data source is changed?

I am using a mat-table so users can see a list of companyConnection objects for an application.

My issue occurs when a user clicks the edit button and updates a companyConnection using a modal, but the change does not reflect in the table.

For troubleshooting, I have printed the updated object to the console in multiple spots and have confirmed that the object is being updated, and it seems to just be a problem with the table not updating.

table.component.html

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z4">
<!-- Columns -->
<ng-container matColumnDef="DattoDomain">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Datto Domain </th>
<td mat-cell *matCellDef="let company"> {{company.dattoDomain}} </td>
</ng-container>
<ng-container matColumnDef="connectWiseId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ConnectWise Id </th>
<td mat-cell *matCellDef="let company"> {{company.connectWiseId}} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>Actions</th>
<td mat-cell *matCellDef="let company">
<button mat-icon-button (click)="openEditCompanyModal(company)">
<mat-icon>edit</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

export class CompanyTableComponent implements OnInit, AfterViewInit {
@ViewChild(MatSort) sort: MatSort;
@Input() companies: CompanyConnection[];
@Input() getError: boolean; 
displayedColumns: string[] = ['DattoDomain', 'connectWiseId', 'actions'];
companies$: Observable<CompanyConnection[]> = of([]);
dataSource = new MatTableDataSource<CompanyConnection>();
constructor(
private companyDataService: CompanyDataService,
private dialog: MatDialog,
private changeDetectorRef: ChangeDetectorRef
) {}
ngOnInit() {
if (this.getError) {
this.companies$ = this.companyDataService.getErrorCompanyConnections();
} else {
this.companies$ = this.companyDataService.getHealthyCompanyConnections();
}
this.companies$.subscribe((companies: CompanyConnection[]) => {
this.dataSource.data = companies;
this.changeDetectorRef.detectChanges();
});
}
ngAfterViewInit() {
this.dataSource.sort = this.sort;
}
openEditCompanyModal(company: CompanyConnection) {
const dialogRef = this.dialog.open(CompanyModalComponent, {
data: { company }
});
dialogRef.afterClosed().subscribe((editedCompany: CompanyConnection) => {
if (editedCompany) {
// Update the existing company connection
this.companyDataService.editCompanyConnection(editedCompany).subscribe(
() => {},
error => {}
);
// Retrieve the updated company connection
this.companyDataService.getCompanyConnection(editedCompany.dattoDomain).subscribe(
(updatedCompany: CompanyConnection | undefined) => {
if (updatedCompany) {
console.log('Updated company connection:', updatedCompany);
} else {
console.log('Company connection not found');
}
},
error => {
console.log('Error retrieving company connection:', error);
}
);
} 
});
}
}

this file returns: Updated company connection: {dattoDomain: 'aptdynamics', connectWiseId: 'Bucks Communications', status: '200'}

Here are methods from the company-connection-service.service.ts file

  export class CompanyDataService {
private companies: CompanyConnection[] = [
{
dattoDomain: "aptdynamics", 
connectWiseId: "Apartment Dynamics",
status: "200"
},
{
dattoDomain: "buckscomm", 
connectWiseId: "Bucks Communications",
status: "200"
},
{
dattoDomain: "cardinalconcretecompany", 
connectWiseId: "Cardinal Concrete Company",
status: "200"
},
{
dattoDomain: "centralcarolinaseeding", 
connectWiseId: "Central Carolina Seeding",
status: "404"
},
];
private companiesSubject = new BehaviorSubject<CompanyConnection[]>(this.companies);
constructor() { }
getCompanyConnections(): Observable<CompanyConnection[]> {
return this.companiesSubject.asObservable();
}
getCompanyConnection(dattoDomain: string): Observable<CompanyConnection | undefined> {
return this.getCompanyConnections().pipe(
map((companies: CompanyConnection[]) => {
return companies.find((company: CompanyConnection) => {
return company.dattoDomain === dattoDomain;
});
})
);
}
getHealthyCompanyConnections(): Observable<CompanyConnection[]> {
return this.getCompanyConnections().pipe(
map((companies: CompanyConnection[]) => {
return companies.filter((company: CompanyConnection) => {
return company.status === "200";
});
})
);
}
getErrorCompanyConnections(): Observable<CompanyConnection[]> {
return this.getCompanyConnections().pipe(
map((companies: CompanyConnection[]) => {
return companies.filter((company: CompanyConnection) => {
return company.status !== "200";
});
})
);
}
addCompanyConnection(company: CompanyConnection): Observable<CompanyConnection[]> {
this.companies.push(company);
this.companiesSubject.next(this.companies);
return of(this.companies);
}
editCompanyConnection(updatedCompany: CompanyConnection): Observable<CompanyConnection[]> {
const index = this.companies.findIndex(c => c.dattoDomain === updatedCompany.dattoDomain);
if (index !== -1) {
this.companies[index] = updatedCompany;
}
return of(this.companies);
}
}

if there is any other code I can provide that would help, please let me know!

Thanks!

Call next on the subject after updating.

  editCompanyConnection(updatedCompany: CompanyConnection): Observable<CompanyConnection[]> {
const index = this.companies.findIndex(c => c.dattoDomain === updatedCompany.dattoDomain);
if (index !== -1) {
this.companies[index] = updatedCompany;
this.companiesSubject.next(this.companies);    //add this line
}
return of(this.companies);
}