How do I single out data from a nested object for columns and data in a react-table?

So, I wanted to make a dynamic table and fetch data from an API. I realise later that the data itself had some nested objects that needed to be filtered out to render the data.

an index of data looks like this:

{ id: 2215, locationId: “dangjinsupercharger”, name: “Dangjin, South Korea”, status: “OPEN”, address: { street: “충남 당진시 송악읍 송악로 63”, city: “당진”, state: “48”, zip: null, countryId: 137, country: “South Korea”, regionId: 102, region: “Asia Pacific”, }, gps: { latitude: 36.909503, longitude: 126.69407466 }, dateOpened: “2019-12-20”, stallCount: 6, counted: true, elevationMeters: 42, powerKilowatt: 120, solarCanopy: false, battery: false, statusDays: 0, urlDiscuss: false, },

So I wanted to fetch out all the data, but to make it work I had to filter out some like “gps” and “address”, which a nested object like this:

const columns = React.useMemo( () => dataArr[0] ? Object.keys(dataArr[0]) .filter( (key) => key !== “gps” && key !== “address” && ) .map((key) => { if (key === “id”) return { Header: key, accessor: key, }; return { Header: key, accessor: key }; }) : [], [dataArr] );

I need to render the property of gps and address too, how do I do that? Or did I do the wrong approach filtering them out? plz hlp.