Not able to edit the task after import in bpmn.js(REACT JS)

  1. In BPMN.js am importing my .bpmn file to open the created diagram in my react application. The file is imported and the diagram also generated based the xml in the bpmn file.

Below mentioned are the issue after importing:

     1. But the issue is am not able to edit the task name after importing the file.
     2. If am trying to add new task in the existing imported task. The new task is added but am not able to edit or enter task name in it.

Below is the code for importing file.

showFile = async (e) => {

          e.preventDefault()
          const reader = new FileReader()
          reader.onload = async (e) => { 
            const text = (e.target.result)
            console.log(text)
          
            bpmnJS
            .importXML(text)
            .then(() => {
              const canvas = bpmnJS.get("canvas");
      
              canvas.zoom("fit-viewport");
            })
            .catch(err => console.log(err));
          };
          reader.readAsText(e.target.files[0])

          
        }

For further assistance, please share a CodeSandbox that reproduces your issue in a way that we can inspect it.