title: How to correct render data from array?
body: <p>App.js
  import { useSiteMetadata } from &quot;../hooks/use-site-metadata&quot;</p>
  <p>export default function () {
  const { projectItems } = useSiteMetadata()</p>
  <pre><code>  return (
      &lt;Box flex flex-wrap items-start mb5&gt;
        {projectItems.map((value, index, category) =&gt; {
          return (
            &lt;ProjectItem
              key={index}
              name={value.name}
              title={value.title}
              image={value.image}
              className=&quot;border-box&quot;
              exerpt={value.exerpt}
              git={value.git}
              url={value.url}
              category={value.category}
              click=&quot;Push&quot;
              sans-serif
              mb0-l
              mb3
              flex-none
              w5
              mr3
            /&gt;
          )
        })}
      &lt;/Box&gt;
    )
  }
  </code></pre>
  <p>site Metadata</p>
  <pre><code>projectItems: [
    {
      name: `1project`,
      title: `1 title`,
      image: `test-pic.jpg`,
      exerpt: `some first project`,
      git: `https://github.com/desmukh/gatsby-starter-woo/tree/master/`,
      url: `https://www.gatsbyjs.com/plugins/gatsby-plugin-smoothscroll/`,
      category: [&quot;all&quot;, &quot;mobile&quot;, &quot;ux-ui&quot;],
    },
    {
      name: `2project`,
      title: `2 title`,
      image: `photo-2.jpg`,
      exerpt: `some 2 project`,
      git: `https://github.com/desmukh/gatsby-starter-woo/tree/master/`,
      url: `https://www.gatsbyjs.com/plugins/gatsby-plugin-smoothscroll/`,
      category: [&quot;all&quot;, &quot;mobile&quot;, &quot;ux-ui&quot;],
    },
    {
      name: `3project`,
      title: `3 title`,
      image: `photo-2.jpg`,
      exerpt: `some 3 project`,
      git: `https://github.com/desmukh/gatsby-starter-woo/tree/master/`,
      url: `https://www.gatsbyjs.com/plugins/gatsby-plugin-smoothscroll/`,
      category: [&quot;all&quot;, &quot;mobile&quot;, &quot;ux-ui&quot;],
    },
  ],
  </code></pre>
  <p>site-metadata-query</p>
  <pre><code>import { useStaticQuery, graphql } from &quot;gatsby&quot;
  export const useSiteMetadata = () =&gt; {
    const { site } = useStaticQuery(
      graphql`
        query MyQuery {
          site {
            siteMetadata {
              title
              description
              author {
                name
              }
              sections
              projectItems {
                name
                title
                image
                exerpt
                git
                url
                category
              }
              favicon
              logo
              menuItems {
                path
                label
              }
              social {
                service
                url
                fa
              }
              footer {
                text
                logo
              }
              address {
                line1
                line2
                line3
              }
              contacts {
                text
                url
              }
            }
          }
        }
      `
    )
    return site.siteMetadata
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/E3Yd6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E3Yd6.png" alt="enter image description here" /></a></p>
  <p>How to fetch data from the site Metadata from the  the categories items array, so it will look like list of items, one by one. Now the problem is that data appear like one piece of data(like on the picture), but there are few items in the array. <a href="https://codesandbox.io/s/modest-varahamihira-2c753?file=/src/pages/P.js" rel="nofollow noreferrer">All code is here</a></p>