Improving a React Ui Component

Your intuition is correct! We can make this a little easier to understand by decomposing everything in a way similar to what you mentioned. What we really want is better separation of concerns. All of this hand waves details away, but the concepts will be what you take with you.

1. You have data.
2. Sort the data.
3. Loop through the outputs from step 2 and render the cards.
4. profit?

Step 1/2. You have data. Why not digest this before rendering? There are tons of ways of doing this, but for the sake of readability lets create a hook and be conscience about our downstream consumers. We can make our ObjectExtract component way simpler if it has well formatted data... And we can memo the results so that our digested data is cached and therefor doesn't recompute ever render.

const useCardData = (data) => {
  return useMemo(() => {
    const entries = Object.entries(data)
        .map(([key, value]) => {
          let type = "unknown";

          if (Array.isArray(key)) {
              type = "array";
          } else if (typeof value === "boolean") {
              type = "boolean";
          } else if { ... };

          return { type, value, key, priority: getTypeSortId(type) };
        })
        .sort((x, y) => x.priority - y.priority)

    return entries;
  }, [data]);
};

We digest our data as much as we can. The key is needed later because using index as a key is almost never what you want since when the order changes, react uses keys to track how rows should be shifted. Numeric indexes from arrays really don't describe the uniqueness of the record. Imagine sorting the records, index 1 could mean completely different things before and after sort, and your data may or may not show up correctly. We use the object property name as our unique key, since objects do a good job of not allowing duplicate keys.

Step 3. Let's use the hook and render the data.

const CardRenderer = ({ data }) => {
  const cards = useCardData(data);

  return (
    <>
      {cards.map((thing) => {
        switch (thing.type) {
          case "boolean":
            return <BooleanCard key={thing.key} data={thing} />;
          case "string":
            return <StringCard key={thing.key} data={thing} />;
          case "...":
            return ...;
        }
      }}
    </> 
  )
};

Since our data is well formed we can simply loop over it with a switch. Instead of defining all cases and their results in one component, notice how we just create smaller card components to handle each specific case. Separation of concern. The boolean card cares about what booleans look like ect. This makes it SUPER easy to test since you can test each card individually and then test the output of our CardRenderer to make sure its output is reasonable.

Step 4. profit. We broke everything down to components. Each piece only cares about a specific responsibility and that makes it easy to glue things together. It makes it composable. We can test each piece by itself and make sure its doing the right thing. We can make some really complex things like this while keeping the complexity of each individual hidden away.

What I described is SOLID. The examples in the link are in PHP but I think you'll get the gist. We can and should use the same patterns in react to build really cool things while managing the every growing complexity of cooler things.