Update selectoptions from selectbox based on previous selectbox value

I’m trying to render a new selectbox with values based on the selection of the previous selectbox. This works the first time, but when I update the value of the first selectbox the list of values from the second selectbox doesn’t change. My guess is that I have to push the selectbox again, but I couldn’t really figure out how. Maybe there is a better solution like a onChange function?

This is my current code:

group.entries.push(entryFactory.selectBox(translate, {
      id: 'component',
      description: '',
      label: 'Component',
      selectOptions: selectComponents,
      modelProperty: 'component'
    }));



    if (element.businessObject.component) {
      methods = (components.filter(value => value.name === element.businessObject.component)[0].methods);

      if (methods.length > 0) {
        console.log(methods.length)
        methods.forEach(value => {
          const option = {
            name: value.name,
            value: value.name
          };
          if (!selectmethods.some(test => test.name === option.name)) {
            selectmethods.push(option);
          }
        });

        const methodSelectBox = entryFactory.selectBox(translate, {
          id: 'method',
          description: '',
          label: 'Method',
          modelProperty: 'method',
          selectOptions: selectmethods
        });

        group.entries.push(methodSelectBox);
      }
    }

code explanation:
When I select a component in the first selectbox a receive a list with methods. These methods are added to the selectOptions list and a new selectbox is added to the property panel. This works great the first time, but when I change the component the list does update but not inside of the property panel.

same here, please if you find a solution mention me here

Turns out that the code above works as expected. I got an error from another piece of code which prevented the update.