Access Nested Array of Objects with React-Query, React-Table from Django API

My problem is I'm having trouble getting to the results array of objects in my query to my Django api backend using react-query and it's extra tools.

const queryInfo = useQuery(
    'articles',
    axios.get(/api/articles/).then((res) => res),
    {
      refetchInterval: 5000,
    }
  );

I've also tried adding to the .then((res) => res.data.results) to access the results[] array of objects to be added to my react-table but get TypeError: data.forEach is not a function

Another attempt was with the react-table column accessor. accessor: 'id', or accessor: 'data.results.id',

So what am I doing incorrectly with these packages to not get the results array of objects?

If this is a duplicate, my apologies I couldn't find the correct reference to what I'm not doing correctly.

I'm able to get the query to show up with just axios.get(/api/articles/).then((res) => res) in the react-query-devtools.

react-query-devtools results:

Data Explorer
▶ Data 6 items
  ▶ data 4 items
    count: 900
    next: "http://localhost:8000/api/articles/?limit=50&offset=50"
    previous: null
    ▶ results 50 items
      ▶ 0 25 items
      ▶ 1 25 items
      ▶ 2 25 items

My data fetching component:

const ArticleTest = () => {
  const queryInfo = useQuery(
    'articles',
    async () => {
      return axios.get('/api/articles/').then((res) => res);
    },
    {
      refetchInterval: 5000,
    }
  );

  const stuff = console.log(queryInfo, 'Articles');

  return (
    <>
      {stuff}
      {queryInfo.isLoading ? (
        'loading'
      ) : queryInfo.isError ? (
        queryInfo.error.message
      ) : (
        <BaseFilterTable data={queryInfo} />
      )}
    </>
  );
};

export default ArticleTest;

My table component:

import { useMemo } from 'react';
import { useTable } from 'react-table';

export const BaseFilterTable = ({ data }) => {
  const columns = useMemo(
    () => [
      {
        Header: 'ID',
        accessor: 'data.results.id',
      },
    ],
    []
  );

  const { getTableProps, getTableBodyProps, headerGroups, prepareRow, rows } =
    useTable(
      {
        columns,
        data,
      },
    );

  const stuff = console.log(data, 'data');

  return (
    <>
      {stuff}
      <div className="table-responsive mb-5">
        <table {...getTableProps()}>
          <thead>
            {headerGroups.map((headerGroup) => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map((column) => (
                  <th {...column.getHeaderProps()}>
                    {column.render('Header')}
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody {...getTableBodyProps()}>
            {rows.map((row, i) => {
              prepareRow(row);
              return (
                <tr {...row.getRowProps()}>
                  {row.cells.map((cell) => {
                    return (
                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                    );
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </>
  );
};

Thank you for your time. If this is a duplicate please refer what I'm doing incorrectly and the correct question.