Cant Render a Table from antd invalid hook call

Question

I am trying to render a <Table/> from the library antd using the data I get from the server but I get this error return Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. this is the code

import React, { useState, useEffect } from "react";
import { Table, Avatar, Spin, Modal, Empty, Button, Popconfirm } from "antd";
import axios from "axios";

const TestComponent = () => {
  const [students, setStudents] = useState({});

  useEffect(() => {
    const fetchStudent = async () => {
      try {
        const config = {
          headers: { "Access-Control-Allow-Origin": "*" },
        };
        const studentsFetched = await axios.get(
          "http://localhost:1020/api/students/page/1",
          config
        );
        setStudents(studentsFetched.data);
      } catch (error) {}
    };

    fetchStudent();
  }, []);

  const colums = [
    {
      title: "",
      Key: "avatar",
      render: (text, student) => (
        <Avatar size="large" style={{ backgroundColor: "orange" }}>
          {`${student.firstName.charAt(0).toUpperCase()}${student.lastName
            .charAt(0)
            .toUpperCase()}`}
        </Avatar>
      ),
    },
    {
      title: "studentId",
      dataIndex: "studentId",
      Key: "studentId",
    },
    {
      title: "firstName",
      dataIndex: "firstName",
      Key: "firstName",
    },

    {
      title: "lastName",
      dataIndex: "lastName",
      Key: "lastName",
    },
    {
      title: "email",
      dataIndex: "email",
      Key: "email",
    },

    {
      title: "Gender",
      dataIndex: "gender",
      Key: "gender",
    },
    {
      title: "",
      Key: "buttom",
      render: (student) => (
        <Popconfirm
          title="Are you sure to delete this task?"
          // onConfirm={() => deleteStudent(student.studentId)}
          okText="Yes"
          cancelText="No"
        >
          <a href="#">Delete</a>
        </Popconfirm>
        // <Button
        //   onClick={() => deleteStudent(student.studentId)}
        //   type="delete"
        // >
        //   Delete
        // </Button>
      ),
    },
  ];

  return (
    <div>
      <Table
        style={{ marginBottom: "100px" }}
        dataSource={students}
        columns={colums}
        rowKey="studentId"
        pagination={false}
      />
     
    </div>
  );
};

export default TestComponent;

I know I'm getting the data because I can log it into the console, I looked and the docs but I'm not getting what is the problem