Express server issues with representing a second properties panel in bpmn-js extension

Question

I have an issue when it comes to extending the bpmn-js-properties-panel-async-extension provided at this link below:

extension

I have essentially repeated the code for an extension I want to make. For some reason the new drop down bar doesn't want to represent the options I have provided but the original "spells" one still works. There also aren't any errors thrown when running so I am a little confused. The code goes as follows;

My server.js file;

const express = require('express');
const cors = require('cors');

const spells = [
  'Avada Kedavra',
  'Crucio',
  'Vulnera Sanentur',
  'Vingardium Leviosa',
  'Alohomora'
];

const privities = [
  'public',
  'static',
  'private',
  'strong dynamic',
  'weak dynamic'
];

// express server which returns spells
const app = express();

app.use(cors());
app.options('*', cors());

app.get('/spell', (req, res) => {
  res.json(spells);
});

app.listen(1234, () => {
  console.log('Listening on port 1234');
});

// express server which returns onchainvars
const app2 = express();

app2.use(cors());
app2.options('*', cors());

app2.get('/privity', (req, res) => {
  res.json(privities);
});

app2.listen(3000, () => {
  console.log('Listening on port 3000');
});

my moddle descriptor file in a file called secbpmn2bc.json:

{
    "name": "Privity",
    "prefix": "privity",
    "uri": "http://privity",
    "xml": {
      "tagAlias": "lowerCase"
    },
    "associations": [],
    "types": [
      {
        "name": "PrvityEnrichedElement",
        "extends": [
          "bpmn:BaseElement"
        ],
        "properties": [
          {
            "name": "privity",
            "isAttr": true,
            "type": "String"
          }
        ]
      }
    ]
  }

the demo MagicPropertiesProvider.js but with the new name Secbpmn2bcPropertiesProvider.js

// Import your custom property entries.
// The entry is a text input field with logic attached to create,
// update and delete the "spell" property.
import privityProps from './parts/PrivityProps';

import { is } from 'bpmn-js/lib/util/ModelUtil';

const LOW_PRIORITY = 500;


/**
 * A provider with a `#getGroups(element)` method
 * that exposes groups for a diagram element.
 *
 * @param {PropertiesPanel} propertiesPanel
 * @param {Function} translate
 */
export default function Secbpmn2bcPropertiesProvider(propertiesPanel, translate) {

  // API ////////

  /**
   * Return the groups provided for the given element.
   *
   * @param {DiagramElement} element
   *
   * @return {(Object[]) => (Object[])} groups middleware
   */
  this.getGroups = function(element) {

    /**
     * We return a middleware that modifies
     * the existing groups.
     *
     * @param {Object[]} groups
     *
     * @return {Object[]} modified groups
     */
    return function(groups) {

      // Add the "privity" group
      if(is(element, 'bpmn:BaseElement')) {
        groups.push(createPrivityGroup(element, translate));
      }

      return groups;
    }
  };


  // registration ////////

  // Register our custom privity properties provider.
  // Use a lower priority to ensure it is loaded after
  // the basic BPMN properties.
  propertiesPanel.registerProvider(LOW_PRIORITY, this);
}

Secbpmn2bcPropertiesProvider.$inject = [ 'propertiesPanel', 'translate' ];

// Create the custom privity group
function createPrivityGroup(element, translate) {

  // create a group called "Privity properties".
  const privityGroup = {
    id: 'privity',
    label: translate('Privity properties'),
    entries: privityProps(element)
  };

  return privityGroup
}

The magicProps.js file with a new name PrivityProps.js

import { SelectEntry, isSelectEntryEdited } from '@bpmn-io/properties-panel';
import { useService } from 'bpmn-js-properties-panel'

// import hooks from the vendored preact package
import { useEffect, useState } from '@bpmn-io/properties-panel/preact/hooks';

export default function(element) {

  return [
    {
      id: 'privity',
      element,
      component: Privity,
      isEdited: isSelectEntryEdited
    }
  ];
}

function Privity(props) {
  const { element, id } = props;

  const modeling = useService('modeling');
  const translate = useService('translate');
  const debounce = useService('debounceInput');


  const getValue = () => {
    return element.businessObject.privity || '';
  }

  const setValue = value => {
    return modeling.updateProperties(element, {
      privity: value
    });
  }

  const [ privities, setPrivities ] = useState([]);

  useEffect(() => {
    function fetchPrivities() {
      fetch('http://localhost:3000/privity')
        .then(res => res.json())
        .then(privitylist => setPrivities(privitylist))
        .catch(error => console.error(error));
    }

    fetchPrivities();
  }, [ setPrivities ]);

  const getOptions = () => {
    return [
      { label: '<none>', value: undefined },
      ...privities.map(privity => ({
        label: privity,
        value: privity
      }))
    ];
  }

  return <SelectEntry
    id={ id }
    element={ element }
    description={ translate('Determine privity') }
    label={ translate('Privity') }
    getValue={ getValue }
    setValue={ setValue }
    getOptions={ getOptions }
    debounce={ debounce }
  />
}

The app folder index.js

import $ from 'jquery';
import BpmnModeler from 'bpmn-js/lib/Modeler';

import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule
} from 'bpmn-js-properties-panel';
import magicPropertiesProviderModule from './provider/magic';
import magicModdleDescriptor from './descriptors/magic';

import secbpmn2bcPropertiesProviderModule from './provider/secbpmn2bc';
import secbpmn2bcModdleDescriptor from './descriptors/secbpmn2bc';

import {
  debounce
} from 'min-dash';

import diagramXML from '../resources/newDiagram.bpmn';

import '../styles/app.less';

var container = $('#js-drop-zone');

var bpmnModeler = new BpmnModeler({
  container: '#js-canvas',
  propertiesPanel: {
    parent: '#js-properties-panel'
  },
  additionalModules: [
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule,
    magicPropertiesProviderModule,
    secbpmn2bcPropertiesProviderModule
  ],
  moddleExtensions: {
    magic: magicModdleDescriptor,
    secbpmn2bc: secbpmn2bcModdleDescriptor
  }
});

function createNewDiagram() {
  openDiagram(diagramXML);
}

async function openDiagram(xml) {

  try {

    await bpmnModeler.importXML(xml);

    container
      .removeClass('with-error')
      .addClass('with-diagram');
  } catch (err) {

    container
      .removeClass('with-diagram')
      .addClass('with-error');

    container.find('.error pre').text(err.message);

    console.error(err);
  }
}

function registerFileDrop(container, callback) {

  function handleFileSelect(e) {
    e.stopPropagation();
    e.preventDefault();

    var files = e.dataTransfer.files;

    var file = files[0];

    var reader = new FileReader();

    reader.onload = function(e) {

      var xml = e.target.result;

      callback(xml);
    };

    reader.readAsText(file);
  }

  function handleDragOver(e) {
    e.stopPropagation();
    e.preventDefault();

    e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }

  container.get(0).addEventListener('dragover', handleDragOver, false);
  container.get(0).addEventListener('drop', handleFileSelect, false);
}


////// file drag / drop ///////////////////////

// check file api availability
if (!window.FileList || !window.FileReader) {
  window.alert(
    'Looks like you use an older browser that does not support drag and drop. ' +
    'Try using Chrome, Firefox or the Internet Explorer > 10.');
} else {
  registerFileDrop(container, openDiagram);
}

// bootstrap diagram functions

$(function() {

  $('#js-create-diagram').click(function(e) {
    e.stopPropagation();
    e.preventDefault();

    createNewDiagram();
  });

  var downloadLink = $('#js-download-diagram');
  var downloadSvgLink = $('#js-download-svg');

  $('.buttons a').click(function(e) {
    if (!$(this).is('.active')) {
      e.preventDefault();
      e.stopPropagation();
    }
  });

  function setEncoded(link, name, data) {
    var encodedData = encodeURIComponent(data);

    if (data) {
      link.addClass('active').attr({
        'href': 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData,
        'download': name
      });
    } else {
      link.removeClass('active');
    }
  }

  var exportArtifacts = debounce(async function() {

    try {

      const { svg } = await bpmnModeler.saveSVG();

      setEncoded(downloadSvgLink, 'diagram.svg', svg);
    } catch (err) {

      console.error('Error happened saving SVG: ', err);

      setEncoded(downloadSvgLink, 'diagram.svg', null);
    }

    try {

      const { xml } = await bpmnModeler.saveXML({ format: true });

      setEncoded(downloadLink, 'diagram.bpmn', xml);
    } catch (err) {

      console.error('Error happened saving diagram: ', err);

      setEncoded(downloadLink, 'diagram.bpmn', null);
    }
  }, 500);

  bpmnModeler.on('commandStack.changed', exportArtifacts);
});

I have tried shifting about what I have changed to find the error but am unfortunately unable to. I honestly think it may just be an issue with the express server as I am also very new to that but included the code I have edited just incase there was an oopsie. Appreciate the help! <3