модальное окно в react

День добрый подскажите, написал такого рода код, который рисует коробочку, с открывающейся крышкой, сейчас возникла потребность добавить на кнопку heart-gift открытие модального окна на bootstrap, у него есть параметр data-toggle, который его и открывает, каким образом я могу его использовать? или мне придется переписывать рендер, хотелось бы пойти по пути меньшего сопротивления))))

var cGiftBox = function (_a) {
  var wasOpen = _a.wasOpen,open = _a.open,dispatch = _a.dispatch;
  return React.createElement("div", { className: "floor" },
  React.createElement("div", { className: "box" },
  open ?
  React.createElement("button", { className: "heart-gift" }) :
  React.createElement(React.Fragment, null),
  React.createElement("div", { className: open ?
    'lid open' :
    wasOpen ?
    'lid close' :
    'lid', onClick: function (e) {return dispatch(toggleBox());} },

  React.createElement("div", { className: "face ltop" }),
  React.createElement("img", { className: "bant", src: "https://i.ibb.co/WfN75vh/ad354fcb5dcc55c077549315ca1a1431.png" }),
  React.createElement("div", { className: "face lleft" }),
  React.createElement("div", { className: "face lright" })),
  React.createElement("div", { className: "face top" }),
  React.createElement("div", { className: "face left" }),
  React.createElement("div", { className: "face right" }),
));
};
// connect and render
var Provider = ReactRedux.Provider,connect = ReactRedux.connect;
var GiftBox = connect(mapStateToProps, mapDispatchToProps)(cGiftBox);
ReactDOM.render(React.createElement(Provider, { store: store },
React.createElement(GiftBox, null)), document.getElementById('root'));