Reactjs – Having trouble with element import in React

I prepared a login page in my project. Normally, I edited it with bootstrap and it was working.

But when I edit and save with ant desing, it gives an error. This is the error message:

"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the rendering method of LoginForm.

It works in the old version, but I have this problem in the new version. I am sharing the code. Can you help me?

import React, { useState } from 'react';
import { Form, Button, Card, Tabs, Input } from 'antd';
import { UserOutlined, MailOutlined, LockOutlined } from '@ant-design/icons';

const { TabPane } = Tabs;

const LoginForm = () => {
  const [activeTab, setActiveTab] = useState('login');

  const handleTabChange = key => {
    setActiveTab(key);
  };

  return (
    <div className="d-flex justify-content-center align-items-center mt-5">
      <Card style={{ width: '400px' }}>
        <Card.Body>
          <Tabs
            activeKey={activeTab}
            onSelect={handleTabChange}
            className="mb-3"
          >
            <TabPane tab="Login" key="login">
              <Form>
                <Form.Item
                  label="Email"
                  name="loginEmail"
                  rules={[{ required: true, message: 'Lütfen email adresinizi girin!' }]}
                >
                  <Input prefix={<MailOutlined />} />
                </Form.Item>

                <Form.Item
                  label="Şifre"
                  name="loginPassword"
                  rules={[{ required: true, message: 'Lütfen şifrenizi girin!' }]}
                >
                  <Input.Password prefix={<LockOutlined />} />
                </Form.Item>

                <Form.Item>
                  <Button type="primary" htmlType="submit">
                    Giriş Yap
                  </Button>
                </Form.Item>
              </Form>
            </TabPane>

            <TabPane tab="Register" key="register">
              <Form>
                <Form.Item
                  label="Ad"
                  name="registerName"
                  rules={[{ required: true, message: 'Lütfen adınızı girin!' }]}
                >
                  <Input prefix={<UserOutlined />} />
                </Form.Item>

                <Form.Item
                  label="Email"
                  name="registerEmail"
                  rules={[{ required: true, message: 'Lütfen email adresinizi girin!' }]}
                >
                  <Input prefix={<MailOutlined />} />
                </Form.Item>

                <Form.Item
                  label="Şifre"
                  name="registerPassword"
                  rules={[{ required: true, message: 'Lütfen şifrenizi girin!' }]}
                >
                  <Input.Password prefix={<LockOutlined />} />
                </Form.Item>

                <Form.Item>
                  <Button type="primary" htmlType="submit">
                    Kayıt Ol
                  </Button>
                </Form.Item>
              </Form>
            </TabPane>
          </Tabs>
        </Card.Body>
      </Card>
    </div>
  );
};

export default LoginForm;

solve to login form import problem