如何用ReactJS向笔记应用程序添加子列表？

import React, { useState } from 'react';

// 子列表组件
function SubList({ items }) {
  const [showSubList, setShowSubList] = useState(false);

  return (
    <div>
      <button onClick={() => setShowSubList(!showSubList)}>
        {showSubList ? '隐藏子列表' : '显示子列表'}
      </button>
      {showSubList && (
        <ul>
          {items.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

// 笔记列表组件
function NoteList() {
  const notes = ['笔记1', '笔记2', '笔记3'];
  const subListItems = ['子项1', '子项2', '子项3'];

  return (
    <div>
      <ul>
        {notes.map((note, index) => (
          <li key={index}>
            {note}
            <SubList items={subListItems} />
          </li>
        ))}
      </ul>
    </div>
  );
}

// 应用程序组件
function App() {
  return (
    <div>
      <h1>笔记应用程序</h1>
      <NoteList />
    </div>
  );
}

export default App;