Ant Design table continues to show loading even when the table is populated by data

I'm using Ant design in my front end project. I have a table component, which gets populated by data from an API. It takes some time to fetch the data, so I want to show a loading spinner.

<Table
  columns={queueColumns}
  dataSource={queueData}
  loading={{ indicator: <div><Spin /></div>}} 
/>

My problem is, even after the table is loaded with the data, my table continues to show the loading spinner.

How can I make the spinner vanish when the table is filled with data?

I suspect I would need to put a condition in loading prop of the Table component. But I'm not sure how to go about that

Edit: I'm fetching data like this:

    const [queueData, setQueueData] = useState('');

    useEffect(() => {        
        var config = {
          method: 'GET',
          url: '/api/queues',
          headers: { 
            'Content-Type': 'application/json'
          }
        };
        axios(config)
        .then(function (response) {
            setQueueData(response.data)
        }) 
      }, [])