Изменение DOM вручную в React

Question

Я использую компонент Ioni c IonPicker, который отображает в качестве родственного элемента div#root React элемент ion-picker, который выглядит как полноэкранное наложение, у которого есть два потомка: элемент ion-backdrop и его брат, div.picker-wrapper.

Я пытаюсь извлечь только элемент div.picker-wrapper, чтобы я мог, скажем, разместить его относительно других компонентов в моем приложении, и Я также хочу иметь возможность добавлять к нему элементы, например, кнопку, являющуюся дочерним элементом div.picker-wrapper, и эта кнопка должна быть компонентом реакции. Поэтому я полагаю, что индивидуальный доступ к существующим детям div.picker-wrapper, div.picker-toolbar и div.picker-columns, будет также хорош.

И, конечно, я должен иметь возможность использовать IonPicker. реквизит и методы и все.

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

Я предполагаю, что ответ включает "Использовать ссылки", поэтому, пожалуйста, предоставьте более подробную информацию. Для начала я попробовал

  picker: RefObject<HTMLIonPickerElement> = React.createRef();

  render() {
    return (
      <IonPicker
        isOpen
        ref={ this.picker }
        animated={ true }
        mode={ 'ios' }
        cssClass={ 'firmm-picker' }
        columns={ this.columns }
        onDidDismiss={ this.props.dismiss }
        buttons={ this.buttons }
        showBackdrop={ false }
      />
    );
  }

Но picker и / или picker.current всегда неопределены или нулевые.

И я пробовал const x = document.getElementById('ion-overlay-1') в разных местах ( componentDidMount, render, shouldComponentUpdate), и его там никогда не будет.