bootstrap-4를 사용하여 mobx-react에서 다시 관찰된 데이터 복귀

나는 mobx-react with bootstrap-4에서 문제를 보았고 나를 미치게 만드는 예상치 못한 결과를 얻었습니다. 아래의 간단한 예제로 요약했습니다.
1) Model 단순히 data 의 배열을 보유하는 객체. 그리고 배열에 action를 추가하는 방법을 제공하는 data입니다.
2) App 모델 개체를 인스턴스화하고 렌더링할 구성 요소:

모델의 data는 JSON 문자열로 렌더링된 배열입니다(해당 데이터는 observable 로 표시됨).

모델에 새 개체를 추가하는 버튼(추가는 모델 개체에서 action로 표시됨)
아래와 같이 bootstrap4 Button 에 Form 를 래핑하지 않으면 이 모든 것이 잘 작동합니다.

render() {    
    return (
      <>
          {JSON.stringify(this.model.data)}

          <Button onClick={this.addNewItem}>Add Another</Button>      
      </>
    )
  }

그러나 Button 가 bootstrap4 Form 에 래핑된 경우 JSON이 새 항목을 포함하도록 변경되지만 새 항목이 포함되지 않은 이전 데이터로 즉시 되돌아가는 약간의 지연을 볼 수 있습니다.

render() {    
    return (
      <>
          {JSON.stringify(this.model.data)}

        <Form>
              <Button onClick={this.addNewItem}>Add Another</Button>
        </Form>


      </>
    )
  }

여기서 무슨 일이 일어나고 있는지 아십니까? 전체 소스는 아래에 있습니다.
감사,
크리스

import React, { Component } from 'react';
import { observer } from 'mobx-react'
import { Card, Form, Button } from 'bootstrap-4-react';
import { action, makeObservable, observable } from 'mobx';

class Model {
  data = null
  constructor(data) {
      this.data = data

      makeObservable(this, {
          data: observable,
          add: action
      })
  }
  add() {
      this.data.push({ "Date": new Date() })
  }
}

class App extends Component {

  constructor(props) {
    super(props)
    this.addNewItem = this.addNewItem.bind(this);
    var data = [
      {
        "Date": new Date()
      }
    ]
    this.model = new Model(data)
  }

  addNewItem() {
    this.model.add()
  }

  render() {    
    return (
      <>
          {JSON.stringify(this.model.data)}

        <Form>
              <Button onClick={this.addNewItem}>Add Another</Button>
        </Form>


      </>
    )
  }
}

export default observer(App);