multiple page manager resets device manager

Hi, I have a small issue with the page manager. I want all the pages to have a fixed resolution. Height and width figures come from an API and I can successfully display the desired resolution on the single page template.

However on the multiple page template, once I switch to a different page, the device manager is reset to full screen (default). How can I achieve my aim, so that the desired resolution are correctly displayed through out all pages.

Please see below my code in React js:

useEffect(() => {
  const editor = grapesjs.init({
    container: "#editor",
    blockManager: {
      appendTo: "#blocks",
    },
    styleManager: {
      appendTo: "#styles-container",
      sectors: [
        {
          name: "Dimension",
          open: false,
          buildProps: ["width", "min-height", "padding"],
          properties: [
            {
              type: "integer",
              name: "The width",
              property: "width",
              units: ["px", "%"],
              defaults: "auto",
              min: 0,
            },
          ],
        },
      ],
    },
    layerManager: {
      appendTo: "#layers-container",
    },
    traitManager: {
      appendTo: "#trait-container",
    },
    selectorManager: {
      appendTo: "#styles-container",
    },
    panels: {
      defaults: [
        {
          id: "basic-actions",
          el: ".panel__basic-actions",
          buttons: [
            {
              id: "visibility",
              active: true, // active by default
              className: "btn-toggle-borders",
              label: '<i class="fa fa-clone"></i>',
              command: "sw-visibility", // Built-in command
            },
          ],
        },
        {
          id: "panel-devices",
          el: ".panel__devices",
          buttons: [
            {
              id: "device-desktop",
              label: '<i class="fa fa-television"></i>',
              command: "set-device-desktop",
              active: true,
              togglable: false,
            },
            {
              id: "store-data",
              label: '<i class="fa fa-save"></i>',
              command: "store-template",
              togglable: false,
            },
          ],
        },
      ],
    },
    deviceManager: {
      devices: [
        {
          name: "Desktop",
          width: `${width}px`,
          height: `${height}px`,
        },
      ],
    },
    storageManager: {
      ...
    },
    plugins: [gjsBlockBasic],
    pluginsOpts: {
      gjsBlockBasic: {},
    },
    pageManager: true,
  });

  const pageManager = editor.Pages;
  editor.on("load", () => {
    setPages([...pageManager.getAll()]);
  });

  editor.Commands.add("set-device-desktop", {
    run: (editor) => editor.setDevice("Desktop"),
  });
  setEditor(editor);
}, [slugId]);