Grapes Js: The css classes are removed and the autogenerated ids for each html tags gets changed ( Example : ivj5m-2) after each reload

Question

How to reproduce the bug?

1. Install the grapes js in react app
2. Go to the editor and drag a component. ( Example : text component)
3. Style the component using the style manager
4. save it into DB and see the code in the editor
5. Reload the page
6. see the code in the editor

What is the expected behavior? The html tag ids and css for that ids should not be changes or erased even though if reload the editor

What is the current behavior? If we are reloading the editor after any changes , the ids in the html code change and the css for that ids getting erased off

If is necessary to execute some code in order to reproduce the bug, paste it here below:

      const editor = grapesjs.init({
            container: "#block",
            canvas: {
              styles: [
                "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css",
              ],
              scripts: [
                "https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js",
                "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js",
              ],
            },
            protectedCss: "",
            commands: {
              defaults: [
                {
                  id: "my-command-id",
                  run() {
                    alert("This is my command");
                  },
                },
              ],
            },
            plugins: ["gjs-preset-webpage"],
            storageManager: {
              id: "gjs_",
              type: "remote",
              autosave: true,
              autoload: true,
              urlStore: this.API_URL + "update_builder/" + this.state.id,
              urlLoad: this.API_URL + this.state.id,
              //method: 'patch',
              params: {
                draft: "1",
              },
              headers: {},
            },
            assetManager: {
              storageType: "",
              storeOnChange: true,
              storeAfterUpload: true,
              upload: "https://localhost/assets/images", //for temporary storage
              assets: [],
              uploadName: "file",
              uploadFile: function (e) {
                var files = e.dataTransfer
                  ? e.dataTransfer.files
                  : e.target.files;
                var formData = new FormData();
                for (var i in files) {
                  formData.append("upload", files[i]); //containing all the selected images from local
                }
                PageService.contentUpload(formData)
                  .then((response) => {
                    console.log(response.data.path);
                    editor.AssetManager.add(response.data.path);
                  })
                  .catch((error) => {
                    // this.alert.show(error.response.data.message,{type:'error'});
                  });
              },
            },
            pageManager: {
              pages: this.pagesList,
            },
            layerManager: {
              appendTo: ".layers-container",
            },
            styleManager: {
              appendTo: '.style-container' 
            },
          });

          const pageManager = editor.Pages;
          const pagesList = pageManager.getAll();
          this.pages = pagesList;
          this.editorData = editor;
          editor.store((res) => (this.callBackAlert = true));

          editor.on("storage:start:store", (objectToStore) => {
            console.log(objectToStore);
          });




          Banner(editor);
          // Resizing the components
          editor.on("component:selected", function (args) {
            args.set("resizable", true);
          });