I have fetched some data:

const data = {
  type: "footer",
  company_data: {
    phone: "123456",
    email: "hello@site.com",
    page1: {
      title: "Terms & Conditions",
      url: "/terms-conditions/",
    },
    page2: {
      title: "Privacy Policy",
      url: "/privacy-policy/",
    },
  },
};

I use the component like this:

<Footer data={data} />

The component:

export default function Footer({ data }) {
  return (
    <div>
      {data.type}
    </div>
  );
}

Great! This prints the type: footer. However if I try to map with Object.entries I get an error:

Error: Objects are not valid as a React child (found: object with keys {phone, email, page1, page2}). If you meant to render a collection of children, use an array instead.

OK so I can't use an object as a React child. I have tried converting to array using Object.entries(data); however, this still returns the same error as it's keeping the objects inside the array.

Any help on how I can get a useable array or object to use in the component with keys and values intact would be greatly appreciated.