質問内容

フロントエンドに関してほぼわからない状態からポートフォリオを作っています。
画像をクリックしてGithubのページに飛びたいのですが、通常の左クリックでは反応せず、中クリックなどによる新規タブで開くと開きます。
原因がわからずここに質問させていただきました。

以下のコードにおける<a href={item.url} ...でリンクの処理を実装しているつもりなのですが、間違っているでしょうか。

JavaScript
1import React, { Component } from 'react';
2export default class Porfolio extends Component {
3  render() {
4    let resumeData = this.props.resumeData;
5    return (
6      <section id="portfolio">
7      <div className="row">
8        <div className="twelve columns collapsed">
9          <h1>作品等</h1>
10          <div id="portfolio-wrapper" className="bgrid-quarters s-bgrid-thirds cf">
11          {
12            resumeData.portfolio && resumeData.portfolio.map((item)=>{
13              return(
14                <div className="columns portfolio-item">
15                  <div className="item-wrap">
16                    <a href={item.url} target="_blank">
17                      <img src={`${item.imgurl}`} className="item-img"/>
18                      <div className="overlay">
19                        <div className="portfolio-item-meta">
20                          <h5>{item.name}</h5>
21                          <p>{item.description}</p>
22                        </div>
23                      </div>
24                    </a>
25                  </div>
26                </div>
27              )
28            })
29          }
30          </div>
31        </div>
32      </div>
33      </section>
34    );
35  }
36}

追記: 左クリックが反応しないについて

コードにあるように、画像部分にカーソルを動かすとoverlayでitemのタイトルと説明が画像部に表示されます。以下に例を示します。
通常時は左のように画像があり、カーソルを合わせると右のようにタイトルと説明がでます。

私としては、コードでいう<a href=...>...</a>は画像部全体に範囲があるため、画像部のどこかをクリックすれば何かしらアクションが起きると考えていましたが、実際は言葉通り何も起こりません。
ロードが始まるわけでもなく、何も変化しません。
しかし、中クリックでは画像部のどこをクリックしても新規タブで開くので、リンクがおかしいわけではないと考えています。
まだ不足な点がございましたら指摘していただけると助かります。