FLIP手法を用いたページレイアウトの作成

プログラミング初学者です。ReactでFLIP手法を用いたページレイアウトを作っているのですが、手詰まりなのでご教授願いたいです。FLIP手法については参考URLを参照願います。
早速ですが、私が作りたいと思っているものは、下記の画像のように１つのメインコンテンツと複数のサブコンテンツで構成され、サブコンテンツをクリックすることでメインコンテンツと位置を入れ替えることができるページレイアウトです。

ネットサーフィンで私が作りたいものと似たレイアウトを見つけたので参考URLとして下記に記載しておきます。

・試したこと
hooksとCSS、react-flip-toolkit(ライブラリ)を使って実現できると考えました。実際、2要素の位置を入れ替えるコードは簡単に実装できました。

https://codesandbox.io/s/flip-l4o04?file=/src/index.js

ですが、コンテンツの数を増やしたときに挙動を制御するコードの書き方がわかりません。
react-flip-toolkitはflipkeyをキーにして挙動するためコンテナを増やしただけではonclickでFlipperタグ内のすべてのコンテナが発火してうまくいきません。

https://codesandbox.io/s/flip-test-f3pqb?file=/src/index.js

次にコードの一部を書き換えてみました。

const AnimatedSquare = () => {
  const [active, setActive] = useState(false);
  const toggleActive = () => setActive(prevState => !prevState);

  const [active1, setActive1] = useState(false);
  const toggleActive1 = () => setActive1(prevState => !prevState);

  return (
    <div>
    <Flipper flipKey={active,active1}>
      <div className="box">
      <Flipped flipId="square">
        <div
          className={active ? "square" : "square-active"}
          onClick={toggleActive}/>
      </Flipped>
      <Flipped flipId="square1">
        <div
          className={active1 ? "square-active-1" : "square1"}
          onClick={toggleActive1}/>
      </Flipped>