my project is using bootstrap, and when i add your garpsjs/studio then it create issue in ui

[MdShadabAhamad]

this is my code when i add this component in my project then there is an issue with ui can you suggest me some changes or how can i overcome to this ,
import React, { useRef, useState, useEffect } from "react";
import StudioEditor from "@grapesjs/studio-sdk/react";
import { Modal, Button } from "react-bootstrap";
import "@grapesjs/studio-sdk/style";

export default function Editable() {
const [editor, setEditor] = useState(null);
const editorRef = useRef(null);

const handleEditorReady = (editorInstance) => {
setEditor(editorInstance);
editorRef.current = editorInstance;
};

return (

<div
// style={{ height: "100vh", width: "100vw", margin: 0, padding: 0 }}
style={{
all: "unset",
height: "100vh",
width: "100vw",
margin: 0,
padding: 0,
}}
>
<StudioEditor
ref={editorRef}
options={{
licenseKey:
"a015ff87d359467481fbc63c0861dffc8da7d222132c4ca7ad0317da4b926b7a",
assets: {
onUpload: async ({ files }) => {
return files.map((file) => ({
src: URL.createObjectURL(file),
}));
},
onLoad: async () => {
return [{ src: "https://via.placeholder.com/150" }];
},
onDelete: async ({ assets }) => {
return [{ src: "https://via.placeholder.com/150" }];
},
},
storage: {
onSave: handleSave,
onLoad: async () => {
const mockProject = {
pages: [
{
html: "

Hello, World!

",
},
],
styles: [
"body { font-family: Arial, sans-serif; }",
"div { color: blue; }",
],
custom: {
js: "console.log('Hello, World!');",
},
};
return { project: mockProject };
},
autosaveChanges: 100,
autosaveIntervalMs: 10000,
},
}}
onReady={handleEditorReady}
/>


);
}

[artf]

Please use this repository to discuss issues with the Studio SDK. This repo is dedicated to the core GrapesJS