Javascript 表情集市导航项目可以'；我第一次没有点击

在我单击其中一个表情符号之前，首次加载导航项的选择器组件无法单击

@observer
export class EmojiPicker extends React.Component<Props> {
  @observable isPickerVisible: boolean;

  handleAddEmoji = (emoji: Emoji): void => {
    this.props.onEmojiSelect(emoji);
  };

  renderPicker = (): React.ReactChild => {
    return (
      <div className={styles.pickerWrapper}>
        <Picker
          perLine={matchesMedia().mobile ? 6 : 9}
          native={true}
          showPreview={false}
          showSkinTones={false}
          color={PRIMARY_COLOR}
          onSelect={this.handleAddEmoji}
          {...this.props}
        />
      </div>
    );
  };

  render(): React.ReactChild {
    const { className } = this.props;

    return (
      <Popover
        content={this.renderPicker()}
        trigger="click"
        placement="bottomRight"
        arrowPointAtCenter
      >
        <Icon name="smile" className={className} />
      </Popover>
    );
  }
}

@observer
导出类EmojiPicker扩展React.Component{
@可观察isPickerVisible：布尔值；
handleAddEmoji=（表情符号：表情符号）：void=>{
this.props.onEmojiSelect（emoji）；
};
renderPicker=（）：React.ReactChild=>{
返回(
);
};
render（）：React.ReactChild{
const{className}=this.props；
返回(
);
}
}

我使用下一个表情库