Modeler page index.js editing

I have a modeler page and I have my index.js file for the script and when i try to save a created bpmn file I Added a save button like this :
Save

I want to use this saveBPMN function when i click my save button

    async function customSaveBPMN() {
        window.showProgressLoading();
        try {
            const { xml } = await customBpmnModeler.saveXML({ format: true });
            const blob = new Blob([xml], { type: "text/xml" });
            const file = new File([blob], getFileName());
            const data = new FormData();
            data.append("File", file);
            data.append("itemType", "11");
            data.append("FamilyId", "17");
            const url = getUrl();
            const res = await request(url, { type: "POST", contentType: false, processData: false, data });
            showMessage(res.Message, res.Status === -1 ? "error" : "success");
            setTimeout(() => {
                location.href = "/SomeRouting";
            }, 1000);
        } catch (err) {
            console.log(err);
            showMessage(err.message, "error");
        } finally {
            window.hideProgressLoading();
        }
    }

and when i clicked my button I think bpmn-js library create another index.js file and run another function

image

And your question is?

my question is why this situation happens and how can i fix this conflict because I want to change my save function but even if i change there is a different js automatically created and it didn’t allow to change

i couldn’t figure out thow such a thing happens. A path named /app appears in my modeler folder and a separate javascript file is created in it.

In the bpmn.io demo, we can download or upload the file, but what I want to do is save it to my database and do a redirect while doing this, and display the file saved in the database on the page with bmpn viewer. Is this possible?