如何在列表框中创建列？

如何解决如何在列表框中创建列？

我想在我的列表框中实现列（标记为紫色），如下图所示：

我的GUI中的主窗口分为两个选项卡。我在这里仅粘贴要实现列的选项卡中的代码。列表框已经在这里：

 console.warn
    Warning: An unhandled error was caught from submitForm() TypeError: Cannot read property 'body' of null
        at getActiveElement (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:6651:16)
        at getActiveElementDeep (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:6939:17)
        at getSelectioninformation (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:6972:21)
        at prepareForCommit (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:7463:26)
        at commitRootImpl (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:22474:5)
        at unstable_runWithPriority (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js:653:12)
        at runWithPriority$1 (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:11039:10)
        at commitRoot (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:22381:3)
        at finishSyncRender (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:21807:3)
        at performSyncWorkOnRoot (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:21793:7)
        at /home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:11089:24
        at unstable_runWithPriority (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js:653:12)
        at runWithPriority$1 (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:11039:10)
        at flushSyncCallbackQueueImpl (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:11084:7)
        at flushSyncCallbackQueue (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:11072:3)
        at scheduleUpdateOnFiber (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:21199:9)
        at dispatch (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:15660:5)
        at /home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/formik/src/Formik.tsx:357:11
        at processticksAndRejections (internal/process/task_queues.js:93:5)

      at node_modules/formik/src/Formik.tsx:836:17