How can I load data pulled from an api to gridjs in a react app

Question

I am trying to surface the results of an api query to gridjs in a react app. I need some help in formatting the response from an openapi generated route.

This works:

function App() {
  const [items, setItems] = useState<any[]>([]);
  const getTheItems = async (filters: string,includeItemTypes:string, limit:number,recursive:boolean) => {
    try {
      const fetchedItems = await itemsServiceApi.getItems(filters, includeItemTypes, limit, recursive);
      const obj = JSON.parse(JSON.stringify(fetchedItems.data));
      console.log(obj.Items);
      setItems(obj.Items);
    } catch (error) {
      console.warn(error)
    }
  };

  useEffect(() => {
    getTheItems("IsNotFolder","Movies",20,true);
  }, []);

  return (
    <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      {items.map((item, index) => (
      <div key={index} id={item.Id}> {item.Name} <br />
      </div>
      ))}
    </header>
  </div>
  );
};
export default App;

This is what I want to accomplish:

function App() {
  const [items, setItems] = useState<any[]>([]);
  const getTheItems = async (filters: string,includeItemTypes:string, limit:number,recursive:boolean) => {
    try {
      const fetchedItems = await itemsServiceApi.getItems(filters, includeItemTypes, limit, recursive);
      const obj = JSON.parse(JSON.stringify(fetchedItems.data));
      console.log(obj.Items);
      setItems(obj.Items);
    } catch (error) {
      console.warn(error)
    }
  };

  useEffect(() => {
    getTheItems("IsNotFolder","Movies",20,true);
  }, []);

  return (
    <div>
      <Grid
        data={items}
        columns={['Name', 'Id']}
        pagination={{
          limit: 5,
        }}
      />
    </div>
  );
};
export default App;

Currently my items array returns like this:

[
    {
        "Name": "The Shepherd",
        "ServerId": "3ac3356dc26a430eabc7ab193ad16189",
        "Id": "10092347",
        "ChannelId": "9476798",
        "RunTimeTicks": 72000000000,
        "Type": "Program",
        "ImageTags": {
            "Primary": "77c5cf117131ead7a9e31012ce673d0c"
        },
        "BackdropImageTags": [],
        "MediaType": "Video",
        "StartDate": "0001-01-01T00:00:00.0000000Z"
    },
    {
        "Name": "Olympia",
        "ServerId": "3ac3356dc26a430eabc7ab193ad16189",
        "Id": "10100423",
        "ChannelId": "9476793",
        "RunTimeTicks": 36000000000,
        "Type": "Program",
        "ImageTags": {
            "Primary": "3e59d6854f930ea9bb21b2046e46426f"
        },
        "BackdropImageTags": [],
        "MediaType": "Video",
        "StartDate": "0001-01-01T00:00:00.0000000Z"
    }
]

....................................................................................................................................................................................................................................................................................