disable properties-panel-container bpmnjs reactjs

Question

I have two scenarios 'edit' and 'view' on bpmnjs, so In 'view' mode, it is required to disable the properties panel to avoid the user modifications. But the user should be able to view the properties panel and it's existing data.

Below is the part, where it is needed to disable the controls

Here is the code

new Modeler({
      container,
      keyboard: {
        bindTo: document
      },
      additionalModules: [
        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule,
        CamundaPlatformPropertiesProviderModule,
        ElementTemplatesPropertiesProviderModule,
        DisableModeling
      ],
  
      moddleExtensions: {
        camunda: camundaModdlePackage
      },
      propertiesPanel: {
        parent: "#properties-panel-container"
      }
    })
return (
    <div className="App">
      { 
      <>
        <button id="export-btn" className="btn" onClick={()=>saveXML()}>Export as XML</button>
        <div id="container"></div>
        <div id="properties-panel-container"></div>
      </>
       }
    </div>
  );

I tried disabling using the below code :

$('.bio-properties-panel-add-entry').attr('disabled',true);
      $('.bio-properties-panel-add-entry').addClass('disabled-btn');
      
      let allInputs = document.querySelectorAll('#properties-panel-container input');

      allInputs.forEach(input => {
        input.disabled = true;
      });

But on clicking on the task and event element in the canvas, the properties panel getting reinitialized with new controls and parameters, which are all enabled again.

I need some solution to disable the properties panel controls like input boxes, dropdown, etc.