multipledropdownfield component saving values in an unexpected order

I am noticing some behavior for the multipledropdown field component that seems unexpected to me. I have included an interface code snippet below, which is what the following example is based off of.

The issue is this: When I select any value from the muldipledropdownfield in the code below, the most recent selection is added to the end of the array in local!selectedColumnsToDisplay. However, when I select a second value, the index of the previous selection changes, and it moves to the position that it is in the choiceValues array.

For example, when the page loads the value of local!selectedColumnsToDisplay is {"Three", "Four"}. Then, I select "One" from the dropdown. Now the value of local!selectedColumnsToDisplay is {"Three", "Four", "One"}. Then, I select "Two" from the dropdown. Now the value of local!selectedColumnsToDisplay is {"One", "Three", "Four", "Two"}. The value "One" has jumped from the end of the array in local!selectedColumnsToDisplay to the beginning.

Why is this occurring? How can I get the values to save in the order that they are selected?

The behavior that I want and that I would expect to see, is that it save the values in the order that they are selected.

a!localVariables(
  local!selectedColumnsToDisplay: {"Three", "Four"},
  {
    a!multipleDropdownField(
      label: "Columns To View",
      labelPosition: "COLLAPSED",
      choiceLabels: {"One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight"},
      choiceValues:  {"One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight"},
      value: local!selectedColumnsToDisplay,
      saveInto: {
        local!selectedColumnsToDisplay,
      },
      validations: {}
    ),
    a!paragraphField(
      value:  local!selectedColumnsToDisplay,
      readOnly: true
    )
  }
)