title: Passing an object prop to a React component in a mapping
body: <p>this might be a very stupid question but im using this Nav Bar for Chakra UI i found and im struggling to understand how to use it.</p>
  <p>This is the array and the NavLink component that I use to map the array of links.</p>
  <pre><code>const Links = ['Dashboard', 'Projects', 'Team'];
  
  const NavLink = ({ children }: { children: ReactNode }) =&gt; (
    &lt;Link
      px={2}
      py={1}
      rounded={'md'}
      _hover={{
        textDecoration: 'none',
        bg: useColorModeValue('gray.200', 'gray.700'),
      }}
      href={'#'}&gt;
      {children}
    &lt;/Link&gt;
  );
  </code></pre>
  <p>How am i supposed to pass the href to the mapping</p>
  <pre><code>Links.map((link) =&gt; (
                  &lt;NavLink key={link}&gt;{link}&lt;/NavLink&gt;
  </code></pre>
  <p>I tried using an object with props name and href , but i have no idea how to pass the href prop to NavLink.</p>
  <p>Help please!</p>