rc-tabs not working: type is invalid -- expected a string (for built-in components) or a class/function (for composite components)

I used the rc-tabs library in Nextjs and got an error. But Reactjs does not. I don't understand why or the rendering mechanism.
Error: Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components)
github: https://github.com/HoTrHieu/Nextjs.git (http://localhost:3000/order)
This is my code:

import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';

const order = () => {
  return (
    <div>
      <Tabs defaultActiveKey="2" onChange={() => {}}>
        <TabPane tab="tab 1" key="1">
          first
        </TabPane>
        <TabPane tab="tab 2" key="2">
          second
        </TabPane>
        <TabPane tab="tab 3" key="3">
          third
        </TabPane>
      </Tabs>
    </div>
  );
};

export default order;

I tried other libraries like react-best-tabs, react-tabs. But still the same error

I took 2 screenshots of the error

struct project

I've never used this lib before but it looks like rc-tabs have no export of TabPane (and they did not update the docs to reflect this change).

Tabs is not accepting children as well. You should use items props instead. Here is a simple working exemple to use it:

import React from "react";
import Tabs from "rc-tabs";

const Order = () => {
  const tabs = new Array(8).fill(0).map((_, index) => {
    return {
      key: index.toString(),
      content: `tab content ${index + 1}`,
    };
  });

  return (
    <div>
      <Tabs
        defaultActiveKey='2'
        onChange={() => {}}
        items={tabs.map(({ key, content }) => ({
          key,
          label: `tab ${key}`,
          children: content,
        }))}
      />
    </div>
  );
};

export default Order;