I have this object:

{
  "id": 24,
  "pic": {
    "pic": [{
        "url": "760634d2-f8ec-4caa-9a2d-14a8828cfb5dpetplace.jpg"
      },
      {
        "url": "760634d2-f8ec-4caa-9a2d-14a8828cfb5dpetplace.jpg"
      }
    ]
  },
  "title": "Title",
  "title_icon": "760634d2-f8ec-4caa-9a2d-14a8828cfb5dpetplace.jpg",
  "social_link": {
    "social_link": [{
        "facebook": "https://facebook.com"
      },
      {
        "instagram": "https://insta.com"
      }
    ]
  },
  "phone_number": "03246101715",
  "address": "346-B PUEHS TOWN 1 BLOCK B",
  "lat": "45678",
  "long": "45678",
  "postcode": "54000",
  "start_time": "2021-11-15T12:15:39.658Z",
  "end_time": "2021-11-15T12:15:39.658Z",
  "email": "Husnain@gmail.com",
  "web_url": "https://getbootstrap.com",
  "createdAt": "2021-11-15T12:15:39.658Z",
  "category": {
    "id": 1,
    "name": "Resturant",
    "pic": "restaurent.png",
    "createdAt": "2021-11-16T18:56:51.163Z"
  }
},

I want too return the facebook and insta links in a table. I am using a map function to display all the records since there are multiple objects in the array.

{
  filteredData.map((product) => (
    <Fragment>
      {editContactId === product.id ? (
        <EditableData data={product} />
      ) : (
        <ReadOnly
          data={product}
          id={product.id}
          handleEditClick={handleEditClick}
        />
      )}
    </Fragment>
  ));
}

I have tried this <td>{data.social_link.social_link[0].facebook}</td> but it does not work. Any suggestions?