如何在单击列表项时在导航栏下方显示元素(不切换)？(React)

import React, { useState } from 'react';

const Navigation = () => {
  const [selectedItem, setSelectedItem] = useState(null);

  const handleItemClick = (item) => {
    setSelectedItem(item);
  };

  return (
    <div>
      <ul>
        <li onClick={() => handleItemClick('Item 1')}>Item 1</li>
        <li onClick={() => handleItemClick('Item 2')}>Item 2</li>
        <li onClick={() => handleItemClick('Item 3')}>Item 3</li>
      </ul>

      <div>
        {selectedItem && (
          <div>
            {/* 在这里根据selectedItem的值渲染相应的元素内容 */}
            {selectedItem === 'Item 1' && <div>元素 1 的内容</div>}
            {selectedItem === 'Item 2' && <div>元素 2 的内容</div>}
            {selectedItem === 'Item 3' && <div>元素 3 的内容</div>}
          </div>
        )}
      </div>
    </div>
  );
};

export default Navigation;