React-wrapped components inside ng-template don't re-render on changes

[bengry]

When rendering a react-wrapper component (e.g. <fab-default-button>) as a render prop in another react component, the inner component is not re-rendered on changes.

More comprehensive example:

// app.component.html
<fab-command-bar>
    <items>
      <fab-command-bar-item key="custom">
        <render>
          <ng-template let-item="item">
            <counter></counter>
          </ng-template>
        </render>
    </items>
</fab-command-bar>

// counter.component.ts
@Component({
  selector: 'counter',
  template: `
    <fab-default-button [text]="count + '+'" (onClick)="onClick()"></fab-default-button>
    `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CounterComponent {
  count = 0;

  constructor(private readonly cd: ChangeDetectorRef) {}

  onClick() {
    this.count++;
    this.cd.detectChanges();
  }
}

When clicking the button, the text is not changed.