如何在React-Bootstrap中将状态变量access在map循环中显示为水平选项卡？

import React, { useState } from 'react';
import { Nav, TabContent, TabPane } from 'react-bootstrap';

const MyTabs = ({ access }) => {
  const [key, setKey] = useState(access);

  return (
    <>
      <Nav variant="tabs" className="flex-column">
        {access.map((item, index) => (
          <Nav.Link
            key={index}
            eventKey={item.value}
            onClick={() => setKey(item.value)}
            active={key === item.value}
          >
            {item.label}
          </Nav.Link>
        ))}
      </Nav>
      <TabContent activeKey={key}>
        {access.map((item, index) => (
          <TabPane key={index} eventKey={item.value}>
            {/* 这里放置每个选项卡的内容 */}
            {item.content}
          </TabPane>
        ))}
      </TabContent>
    </>
  );
};

export default MyTabs;