If you want to experience unexpected rendering and element re-ordering in production sort your array values at the top-level of your component.

const Component = ({ arr }) => {
  const sorted = arr.sort(...)

  return (
    <>{sorted.map(...)}</>
  )
}

You shouldn't want that. Wrap it in a useMemo instead. Create a shallow copy while you're at it, sort sorts the values in place (mutates the array) instead of producing a new array.

const Component = ({ arr }) => {
  const sorted = useMemo(() => {
    return [...arr].sort(...)
  }, [arr])

  return (
    <>{sorted.map(...)}</>
  )
}

This is a sneaky issue that may only make itself known once you've deployed your code to production, so keep an eye out.

My personal best recommendation - if your array should always be sorted in a particular way, do it on the server. Your components should be fkn stupid.

fin.