Avoid refinements "jump" when using useCurrentRefinements

[javierdebug]

I'm using the hook 'useCurrentRefinements' in a Next (React) component as:
const currentRefinements = useCurrentRefinements();

Then, I'm using the currentRefinements.items and mapping every refinement inside that array to display the refinements somewhere on the page, so the user can easily remove any of them.
The issue is that I have different refinements, so say the items array at some point is:

[
  {
    "label": "label1",
    "refinements": [
      {
        "value": "value1",
        "label": "Value 1",
        "count": 1,
      },
      {
        "value": "value2",
        "label": "Value 2",
        "count": 0,
      }
    ]
  },
  {
    "label": "label2",
    "refinements": [
      {
        "value": "value3",
        "label": "Value 3",
        "count": 1,
      }
    ]
  },
  {
    "label": "label2",
    "refinements": [
      {
        "value": "value4",
        "label": "Value 4",
        "count": 1,
      }
    ]
  }
]

Then, if the user adds a new refinement, it could be:

[
  {
    "label": "label1",
    "refinements": [
      {
        "value": "value1",
        "label": "Value 1",
        "count": 1,
      },
      {
        "value": "value2",
        "label": "Value 2",
        "count": 0,
      },
      {
        "value": "new-value-3",
        "label": "New Value 3",
        "count": 0,
      }
    ]
  },
  {
    "label": "label2",
    "refinements": [
      {
        "value": "value3",
        "label": "Value 3",
        "count": 1,
      }
    ]
  },
  {
    "label": "label2",
    "refinements": [
      {
        "value": "value4",
        "label": "Value 4",
        "count": 1,
      }
    ]
  }
]

The first object in the refinements.items has grown, so that refinement will get added first in the section, making the rest of the refinements "jump" to make space for the newly added one. Is there a way to keep the refinements added as they are clicked, or is there a way to order the refinements flat that doesn't change the order?

If you can point me to a similar issue/discussion or any ideas, that would be helpful. Thank you in advanced

[Haroenv]

The refinements are grouped, so there's no way to reconstruct an ordering by time, I could imagine you flatten the items, compare with the previous items and then add any new items at the end, although I'm not sure if your users will like this more than a predictable ordering?

[javierdebug]

Thank you for your reply. Yes, I think this is the way to go.
Since I'm rendering the refinements in a different place on the page is more predictable for users to see the most recently added refinement at the end of the section instead of at the beginning in the case, for example, that the refinement belongs to the first group.