I started learning shopify and created an app via the shopify cli create node app. I use polaris to render the components on the app page. And I can't figure out how I can display the list of selected products from the Resource Picker on the page. I can do this somehow through map () returning list.

My code:

import { Page, Card, ResourceList } from '@shopify/polaris';
import { ResourcePicker } from '@shopify/app-bridge-react';

import { useState } from 'react';

const Index = () => {
  const [resources, setResources] = useState([]);
  const [open, setOpen] = useState(false);
  const handleSelection = (resources) => {
    setOpen(false);
    setResources(resources);
  };

  return (
    <Page
      title={'product selector'}
      primaryAction={{
        content: 'Select products',
        onAction: () => setOpen(true)
      }}>
      <ResourcePicker
        resourceType={'Product'}
        open={open}
        onCancel={() => {
          setOpen(false);
        }}
        onSelection={(resources) => {
          handleSelection(resources);
        }}/>
      <Card>
        <ResourceList
          resourceName={{singular: 'product', plural: 'products'}}
          items={resources}
          renderItem={}>

        </ResourceList>
      </Card>
    </Page>
  );
};

export default Index;