ReactJS - useState для различных компонентов рендеринга

Question

Я хотел бы построить сетку из «виджетов». Эти виджеты являются разными компонентами React.

Поэтому я хотел бы использовать React Hooks. Каков наиболее подходящий способ сделать это?

Я думал о чем-то вроде:

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const componentA = <div>I am component 1</div>;
  const componentB = <div>I am another component (2)</div>;

  const overviewGrid = (
    <div>
      <button
        onClick={() =>
          setCurrComponent(() => {
            return componentA;
          })
        }
      >
        Open component a
      </button>
      <button
        onClick={() =>
          setCurrComponent(() => {
            return componentB;
          })
        }
      >
        Open component b
      </button>
    </div>
  );
  const [currComponent, setCurrComponent] = useState(overviewGrid);
  const pages = [
    {
      id: 0,
      component: () => {
        return componentA;
      }
    },
    {
      id: 1,
      component: () => {
        return componentB;
      }
    }
  ];
  return <div className="App">{currComponent}</div>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Есть ли лучший способ?