Display correct tooltip in react-table column

Question

I am trying to display tool tip using react-tooltip component in a tags column when tags are more than 2 I am able to display tool tip but it's always giving me a last tag. although I want row basis tool tip . Seeking a help in correcting a logic?

eg:tooltip should display tag3,tag4,iphone for 4th row. display tag5,tag6,tag,dollar 5th row

Below is the link for the code

codeSandbox

[
  {
   "id": 1,
    "first_name": "Torie",
    "last_name": "Rustman",
     "email": "trustman0@amazon.co.uk",
      "date_of_birth": "1979-11-16T23:04:32Z",
       "age": 45,
        "tags": null,
        "phone": "6844103517"
   },
  {
  "id": 2,
  "first_name": "Kordula",
  "last_name": "Gecks",
  "email": "kgecks1@deviantart.com",
  "date_of_birth": "1997-08-06T21:07:34Z",
  "age": 30,
  "tags": null,
  "phone": "8429683893"
},
{
  "id": 3,
  "first_name": "Vikki",
  "last_name": "Simoens",
  "email": "vsimoens2@ted.com",
  "date_of_birth": "2016-04-28T16:59:19Z",
  "age": 48,
  "tags": [
   { "id": 0, "name": "tag1" },
   { "id": 1, "name": "tag2" }
  ],
   "phone": "8672773997"
  },
  {
   "id": 4,
   "first_name": "Burnaby",
   "last_name": "Cowern",
   "email": "bcowern3@forbes.com",
   "date_of_birth": "2017-10-25T08:05:50Z",
   "age": 54,
   "tags": [
    { "id": 0, "name": "tag3" },
    { "id": 1, "name": "tag4" },
    { "id": 2, "name": "iphone" }
  ],
   "phone": "4257971694"
 },
 {
   "id": 5,
   "first_name": "Teddie",
   "last_name": "Traice",
   "email": "ttraice4@zdnet.com",
  "date_of_birth": "2015-04-20T11:45:34Z",
  "age": 57,
  "tags": [
    { "id": 0, "name": "tag5" },
    { "id": 1, "name": "tag6" },
    { "id": 2, "name": "tag" },
    { "id": 3, "name": "dollar" }
  ],
  "phone": "3932158370"
  },

 {
   "id": 7,
  "first_name": "Shayna",
  "last_name": "Dimitresco",
  "email": "sdimitresco6@uiuc.edu",
  "date_of_birth": "1997-10-28T11:25:07Z",
  "age": 21,
  "tags": null,
  "phone": "1216713219"
  }
]