Using Drawflow library create nodes but they are not visible

I’m trying to use the amazing Drawflow library (Javascript) from:

Here is my code:

<head>
    {% load static %}
    <link rel="stylesheet" href="{% static 'drawflow/src/drawflow.css' %}">
    <link rel="stylesheet" href="{% static 'css/theme.css' %}">
</head>

<body>

    <div id="drawflow"></div>

    <script type='module'>
        // The minified version is build as an UMD module, so it cannot be imported
        // It should be rebuild eventually.
        // https://stackoverflow.com/questions/75514648/uncaught-syntaxerror-the-requested-module-does-not-provide-an-export-named-dra
        import Drawflow from "{% static 'drawflow/src/drawflow.js' %}";
        import sheet from "{% static 'drawflow/src/drawflow.css' %}" assert { type: 'css'};
        import { h, getCurrentInstance, render } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        const Vue = { version: 3, h, render };

        const container = document.getElementById("drawflow");
        var editor = new Drawflow(container);
        //const internalInstance = getCurrentInstance()
        //editor.value = new Drawflow(container, Vue, internalInstance.appContext.app._context);

        editor.reroute = true;
        editor.editor_mode = 'edit';
        editor.start();
        editor.addModule('nameNewModule');
        
        const nodeData = {
          id: 'node-1',
          name: 'My Node',
          module: 'nameNewModule',
          x: 500,
          y: 100,
          class: '',
          html: function() {
            return '<div>' + this.name + '</div>';
          } ,
          inputs: {
            input_1: {
              label: 'Input 1',
            },
          },
          outputs: {
            output_1: {
              label: 'Output 1',
            },
          },
          data: {
            command: 'Run command',
          },
        };

        editor.addNode(nodeData.module, 
            Object.keys(nodeData.inputs).length,
            Object.keys(nodeData.outputs).length,
            nodeData.x, nodeData.y,
            nodeData.class, nodeData.data, nodeData.html());
    </script>

</body>

However, when I run this (using a Django server), I don’t get any error, neither on the server or in the console, and I checked the library is loaded, but I don’t see anything.

However, I know the elements are properly created as we can see here:

If I turn off the property “position: absolute” on the element, I get something like this:

Now the node is visible but I can’t do much with it and it has the wrong geometry. I can’t drag it or do anything, and it’s way too large and at the wrong position.

I don’t really understand what is going.

If anyone can help, or see if they can reproduce this with the same code, thanks.