I've come up with a working solution to this, but it not feels good to me. Just take a look please and let me know. Is that acceptable to use it like that?

The example is very simplified, I've needed to provide a bunch of props for each component, that's why I've put sorting function right inside the main one. Basically each sorted component is a part of big formik form.

import React from "react";
import "./styles.css";

function ComponentOne() {
  return <div>One</div>;
}
function ComponentTwo() {
  return <div>Two</div>;
}
function ComponentThree() {
  return <div>Three</div>;
}
function ComponentFour() {
  return <div>Four</div>;
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      {(() => {
        const components = [
          {
            order: 4,
            component: <ComponentOne />
          },
          {
            order: 3,
            component: <ComponentTwo />
          },
          {
            order: 2,
            component: <ComponentThree />
          },
          {
            order: 1,
            component: <ComponentFour />
          }
        ];

        return components
          .sort((a, b) => a.order - b.order)
          .map((item) => (
            <React.Fragment key={item.order}>{item.component}</React.Fragment>
          ));
      })()}
    </div>
  );
}

Here's a sandbox for this: https://codesandbox.io/s/confident-leavitt-etwyo1?file=/src/App.js