Grapesjs bootstrap modal

How do we go about replacing the grapesjs modal with a bootstrap modal? For example, say I want to open the export modal of the MJML lib. I created the html element in my view:

<div class="modal fade" id="export-template" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="updatePasswordLabel">Export template</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col">
						<div id="exportModalContent"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Then I override command-export-mjml.js with const container = document.getElementById("exportModalContent"); and

$("#export-template").modal('show');
modal.open();

But this opens both BS modal and grapesjs modal, yet the grapesjs modal is outside the BS modal.