MobX Побочные эффекты, такие как изменение состояния, не разрешены

Question

Я не пытаюсь изменить состояние из функции рендеринга. На самом деле, это работает, если я удаляю тег <ul>. Я не знаю, что сказать. Пожалуйста, StackOverflow дает мне доступ к этому сообщению (извините)

@observer
class LeftMenu extends Component {
  @observable rows = [];

  componentDidMount() {
    this.renderRows(this.props.shareFiles);
  }

  renderRows = async (data, prevDir = "") => {
    const tempDir = prevDir;
    for (const dir of data) {
      const subDirectories = await API.browseFolder.getFiles({
        shareName: this.props.shareName,
        dirPath: prevDir === "" ? `${dir.name}` : `${tempDir}${dir.name}`
      });
      if (subDirectories.data.length) {
        prevDir += dir.name + "/";
        this.rows.push(
          <ul styleName="Main-row">
            {/* here's an error occurred */}
            <FolderRow onClick={this.onClick} label={dir.name} />
          </ul>
        );
        this.renderRows(subDirectories.data, prevDir);
      } else {
        this.rows.push(
          <FolderRow onClick={this.onClick} key={dir.name} label={dir.name} />
        );
      }
    }
  };

  render() {
    const { shareName } = this.props;
    return (
      <div styleName="Container">
        <h3 styleName="Share-name">{shareName}</h3>
        <ul styleName="Main-row">{this.rows}</ul>
      </div>
    );
  }
}

Я пытался решить это весь день :) Есть мысли?