我想为编辑器做一个可拖动的拆分面板，其行为主要类似于CodeSandbox的Console面板：
1.当我们单击Console时，面板展开，箭头变为ArrowDown，表示关闭。
1.面板的边框是可拖动的。
1.当我们单击展开面板上的Console时，面板关闭，箭头变为ArrowUp以展开。
我有下面的代码（https://codesandbox.io/s/reset-forked-ivebxf?file=/src/App.js）由https://github.com/johnwalley/allotment。它可以展开和关闭面板，但有一个冲突的大小。当面板关闭，我们拖动边界，我希望箭头成为ArrowDown。同样，当面板打开，我们拖动边界向下到底部，我希望箭头成为ArrowUp。
有人知道怎么做吗？我也对其他react库持开放态度。

import React from "react";
import { Allotment } from "allotment";
import "allotment/dist/style.css";
import styles from "./App.module.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      toExpand: true
    };
  }

  render() {
    return (
      <div>
        <div className={styles.container}>
          <Allotment vertical>
            <Allotment.Pane>abc</Allotment.Pane>
            {!this.state.toExpand && (
              <Allotment.Pane preferredSize="50%">
                <div
                  onClick={() => {
                    this.setState({ toExpand: !this.state.toExpand });
                  }}
                >
                  Console &nbsp;
                  {this.state.toExpand ? "ArrowUp" : "ArrowDown"}
                </div>
              </Allotment.Pane>
            )}
            {this.state.toExpand && (
              <Allotment.Pane preferredSize="0%">
                <div
                  onClick={() => {
                    this.setState({ toExpand: !this.state.toExpand });
                  }}
                >
                  Console &nbsp;
                  {this.state.toExpand ? "ArrowUp" : "ArrowDown"}
                </div>
              </Allotment.Pane>
            )}
          </Allotment>
        </div>
      </div>
    );
  }
}