Как изменить реквизиты компонента React в компоненте Angular?

У меня есть проблема - я создал компонент React, который делает модальным изменение базы данных из списка. И в проекте, над которым я работаю, есть старый компонент Angular, который представляет собой кнопку для вызова этого модального React.

В моем реагирующем модале у меня есть несколько полей:

export interface ConnectedDatabaseModalState {
list,
isLoading,
selected,
isDatabaseLoading,
visible
}

После загрузки страницы для параметра visible установлено значение true, когда я выбираю базу данных, есть способ скрыть модальность:

    hide() {
    this.setState({
        visible: false,
        isDatabaseLoading: false
    })
}

Таким образом, модальное окно не уничтожается, оно просто скрыто. В моем угловом компоненте я хочу снова изменить visible на true, но я не знаю, как это сделать:

export class SelectDatabaseButtonComponent extends BasicComponent implements OnInit {
@Input() openDbModalFn: any;

selectDatabase$ = new Subject();
database: Database;


constructor(private store: Store<AppState>, private cdr: ChangeDetectorRef) {
    super();
}

ngOnInit() {
    this.selectDatabase$.pipe(takeUntil(this.componentDestroyed$)).subscribe(response => {
        //TODO open modal here
    });

    this.subscriptions.add(
        this.store
            .pipe(
                select(selectSelectedDatabase),
                tap((database) => {
                    this.database = database;
                    this.cdr.detectChanges();
                })
            ).subscribe()
    )
}
}

И шаблон:

<button type = "button" id = "modalButton" class = "btn btn-primary btn-sm" (click) = "selectDatabase$.next()">
{{ (database?.description) || "Undefined"}}

Кто-нибудь может мне помочь? А также скажите мне, хорошо ли менять свойства реактивного компонента в угловом компоненте?

Что я хочу сделать, так это вызвать метод из реагирующего компонента:

show() {
    this.setState({
        visible: true
    })
}

В компоненте Angular на месте //TODO