How to save current diagram in the canvas to a .bpmn file

in a previous question, I was wondering how to not recreate the canvas after a page refresh (the reset will be handle manually later on) in order to always show the latest diagram.
I thought that a solution could be to save current diagram xml to a bpmn file in a specific path.
To simplify the coding, I’d need to overwrite ./diagram.bpmn. The initial diagram file will be restored later on.

import diagramXML from "./diagram.bpmn";
function registerFileDrop(container, callback) {
  async function handleDroppedModule(e) {
   // if current diagram is empty
    if (parseFloat(localStorage.getItem('numOfTasksDropped')) == 0) {
      await createNewDiagram();
    } else {
     // save the current xml to ./diagram.bpmn

I thought that modeler.saveXML() would save the current xml to the location of diagramXML but it does not.
Could you help me? Thank you in advance.

The imported XML stored in diagramXML is a string. When importing the XML bpmn-js will use that XML string to construct the diagram.

saveXML returns a promise that will eventually resolve with a string containing the XML. What you do with that string is entirely up to you.

const { xml } = modeler.saveXML();

// ...

Thank you for your answer.
If I’ve understood correctly, when canvas loads, bpmn-js reads and loads the XML string (named diagramXML) obtained from ./diagram.bpmn.
How can I make the canvas initialiser to read a different xml string (for ex. the one got from modeler.saveXML())?