title: Open link in external window tab
body: <p>can anyone help me with this problem? I'm trying to get the links to open in an external window tab, but I can't get that result with <code>href</code>.</p>
  <p>Here is the code - src/utils/menu.js:</p>
  <pre><code>    const menu = [
        {
          name: 'App',
          sublinks: [
            { name: 'App Store', link: 'someLink' },
            { name: 'Play Store', link: 'someLink' },
          ]
        },
        {
          ...
            },
          ]
        }
      ]
      
      module.exports = menu
  </code></pre>
  <pre><code>export default function Menu(props) {
    return (
      &lt;StyledMenu tabIndex={0}&gt;
        &lt;StyledMenuTitle&gt;
          &lt;span style={{ marginRight: '0.25rem' }}&gt;{props.data.name} &lt;/span&gt;
          &lt;MenuFlyout&gt;
            {props.data.sublinks.map((item, index) =&gt; {
              return (
                &lt;StyledMenuItem tabindex={index} key={index}&gt;
                  {item.link.split('.').slice(-1)[0] === 'pdf' ? (
                    &lt;StyledExternalLink href={item.link} target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;
                      &lt;StyledTitle&gt;{item.name}&lt;/StyledTitle&gt;
                    &lt;/StyledExternalLink&gt;
                  ) : (
                    &lt;StyledExternalLink href={item.link}&gt;
                      &lt;StyledTitle&gt;{item.name}&lt;/StyledTitle&gt;
                      {item.description &amp;&amp; &lt;StyledDescription&gt;{item.description}&lt;/StyledDescription&gt;}
                    &lt;/StyledExternalLink&gt;
                  )}
                &lt;/StyledMenuItem&gt;
              )
            })}
          &lt;/MenuFlyout&gt;
        &lt;/StyledMenuTitle&gt;
      &lt;/StyledMenu&gt;
    )
  }
  </code></pre>