I am using Ant Design for tabs in my project. But while using horizontal tabs vertical tabs are coming. While using the normal tab also the vertical tab coming? Here is the section of code that contains horizontal and vertical tabs. In my case, I am getting vertical tabs in both cases.

import { Radio, Tabs } from 'antd';
import { useState } from 'react';
const { TabPane } = Tabs;

const App = () => {
  const [mode, setMode] = useState('top');

  const handleModeChange = (e) => {
    setMode(e.target.value);
  };

  return (
    <div>
      <Radio.Group
        onChange={handleModeChange}
        value={mode}
        style={{
          marginBottom: 8,
        }}
      >
        <Radio.Button value="top">Horizontal</Radio.Button>
        <Radio.Button value="left">Vertical</Radio.Button>
      </Radio.Group>
      <Tabs
        defaultActiveKey="1"
        tabPosition={mode}
        style={{
          height: 220,
        }}
      >
        {[
          ...Array.from(
            {
              length: 30,
            },
            (_, i) => i,
          ),
        ].map((i) => (
          <TabPane tab={`Tab-${i}`} key={i} disabled={i === 28}>
            Content of tab {i}
          </TabPane>
        ))}
      </Tabs>
    </div>
  );
};

export default App;