Pagination with React & Axios: Iterating through array

I am using use-axios hooks in my React application to fetch data from an API and paginate it with 5 items each page.

Sandbox: https://codesandbox.io/s/axios-hooks-infinite-scrolling-forked-hxbnq?file=/src/index.js

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import useAxios from "axios-hooks";

function App() {
  const [dataPerPage, setDataPerPage] = useState({});
  const [page, setPage] = useState(1);
  const [{ data, loading, error }] = useAxios({
    url: "http://localhost:6366/api/rule-sets",
    params: { page: page }
  });

  useEffect(() => {
    setDataPerPage((d) => ({ ...d, [page]: data }));
  }, [page, data]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;

  return (
    <div>
      <button onClick={() => setPage((p) => p + 1)}>load more</button>

      <pre>
        {JSON.stringify(
          [].concat(...Object.values(dataPerPage).map((p: any) => p)),
          null,
          2
        )}
      </pre>
    </div>
  );
}

The API is returning me this:

[
  {
    "user": {
      "username": "q123123",
      "displayName": "John Snow"
    },
    "active": false,
    "_id": "612496f44683924ea85d731b",
    "filename": "my file 2.xls",
    "rules": [
      {
        "_id": "612496f44683924ea85d731c",
        "sourceSystem": "CRM_MOBILE",
        "classifications": "OPT,BLM",
        "segment": null,
        "calendar": "Standard",
        "createSla": true,
        "slaDurationInMinutes": 300,
        "sendNotification": true,
        "useHolidays": false
      }
    ],
    "createdAt": "2021-08-24T06:51:32.552Z",
    "updatedAt": "2021-08-24T06:51:32.552Z",
    "__v": 0
  },
  ...
]

I want now to pass each object in the Array to my <RuleSetsItem> component as a prop:

<RuleSetsItem ruleSets={ruleSet} />

But I can not iterate it like this:

{ [].concat(...Object.values(dataPerPage).map((p: any) => (
  p ? p.map(item => <RuleSetsItem>) : ''
)))}

as there is no map possible and also the first render is undefinded || null.

I also tried it with Object.keys(p).map() but this just returns me 01234.

This is my original implementation as reference before I implemented pagination with just a basic GET that returned me all stored items:

{ruleSets?.length
  ? ruleSets.map((ruleSet: RuleSetType) => (
    <div key={ruleSet._id}>
      <RuleSetsItem ruleSets={ruleSet} />
    </div>
  ))
: ''}