如何在我的侧边栏中为每个部分制作不同的appbar？[ReactJs]

import React, { useState } from 'react';

// 侧边栏组件
const Sidebar = ({ sections, onSectionClick }) => {
  return (
    <div>
      {sections.map((section, index) => (
        <button key={index} onClick={() => onSectionClick(index)}>
          {section}
        </button>
      ))}
    </div>
  );
};

// Appbar组件
const Appbar = ({ title }) => {
  return <div>{title} Appbar</div>;
};

// 父组件
const ParentComponent = () => {
  const sections = ['Section 1', 'Section 2', 'Section 3'];
  const [selectedSection, setSelectedSection] = useState(0);

  const handleSectionClick = (index) => {
    setSelectedSection(index);
  };

  return (
    <div>
      <Sidebar sections={sections} onSectionClick={handleSectionClick} />
      {selectedSection === 0 && <Appbar title="Section 1" />}
      {selectedSection === 1 && <Appbar title="Section 2" />}
      {selectedSection === 2 && <Appbar title="Section 3" />}
    </div>
  );
};

export default ParentComponent;