title: Cant Render a Table from antd invalid hook call
body: <p>I am trying to render a <code>&lt;Table/&gt;</code> 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</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import { Table, Avatar, Spin, Modal, Empty, Button, Popconfirm } from &quot;antd&quot;;
  import axios from &quot;axios&quot;;
  
  const TestComponent = () =&gt; {
    const [students, setStudents] = useState({});
  
    useEffect(() =&gt; {
      const fetchStudent = async () =&gt; {
        try {
          const config = {
            headers: { &quot;Access-Control-Allow-Origin&quot;: &quot;*&quot; },
          };
          const studentsFetched = await axios.get(
            &quot;http://localhost:1020/api/students/page/1&quot;,
            config
          );
          setStudents(studentsFetched.data);
        } catch (error) {}
      };
  
      fetchStudent();
    }, []);
  
    const colums = [
      {
        title: &quot;&quot;,
        Key: &quot;avatar&quot;,
        render: (text, student) =&gt; (
          &lt;Avatar size=&quot;large&quot; style={{ backgroundColor: &quot;orange&quot; }}&gt;
            {`${student.firstName.charAt(0).toUpperCase()}${student.lastName
              .charAt(0)
              .toUpperCase()}`}
          &lt;/Avatar&gt;
        ),
      },
      {
        title: &quot;studentId&quot;,
        dataIndex: &quot;studentId&quot;,
        Key: &quot;studentId&quot;,
      },
      {
        title: &quot;firstName&quot;,
        dataIndex: &quot;firstName&quot;,
        Key: &quot;firstName&quot;,
      },
  
      {
        title: &quot;lastName&quot;,
        dataIndex: &quot;lastName&quot;,
        Key: &quot;lastName&quot;,
      },
      {
        title: &quot;email&quot;,
        dataIndex: &quot;email&quot;,
        Key: &quot;email&quot;,
      },
  
      {
        title: &quot;Gender&quot;,
        dataIndex: &quot;gender&quot;,
        Key: &quot;gender&quot;,
      },
      {
        title: &quot;&quot;,
        Key: &quot;buttom&quot;,
        render: (student) =&gt; (
          &lt;Popconfirm
            title=&quot;Are you sure to delete this task?&quot;
            // onConfirm={() =&gt; deleteStudent(student.studentId)}
            okText=&quot;Yes&quot;
            cancelText=&quot;No&quot;
          &gt;
            &lt;a href=&quot;#&quot;&gt;Delete&lt;/a&gt;
          &lt;/Popconfirm&gt;
          // &lt;Button
          //   onClick={() =&gt; deleteStudent(student.studentId)}
          //   type=&quot;delete&quot;
          // &gt;
          //   Delete
          // &lt;/Button&gt;
        ),
      },
    ];
  
    return (
      &lt;div&gt;
        &lt;Table
          style={{ marginBottom: &quot;100px&quot; }}
          dataSource={students}
          columns={colums}
          rowKey=&quot;studentId&quot;
          pagination={false}
        /&gt;
       
      &lt;/div&gt;
    );
  };
  
  export default TestComponent;
  </code></pre>
  <p>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</p>