Retrieving Array from Contentful GraphQL query for page created by slug build error

Question

I'm using React and Contentful to build an app, this uses GraphQL for data querying and I'm trying to retrieve an array on a 'post' style page created by the slug. I'm able to pull through static data but I need to be able to display content from a couple of different arrays but I see to be running into either a routing or parsing issue.

I've created the GraphQL query below:

export const pageQuery = graphql`
query CareerPageQuery($slug: String!) {
contentfulSite(id: { eq: "c898f54a-af7b-5e84-acd2-4a5ff6b0d086" }) {
  siteTitle
}
contentfulCareer(slug: { eq: $slug }) {
  title
  slug
  description
  thePerson {
    info {
      info
    }
  }
  theJob {
    info {
      info
    }
  }
  theExperience {
    info {
      info
    }
  }
  theRewards {
    info {
      info
    }
  }
  progression {
    progression
  }
  toApply {
    toApply
  }
}

} `

I then create the variables so that I'm able to access static data such as the title and description:

const career = get(this.props, 'data.contentfulCareer')

This allows me to grab the title like so {career.title} but when I try and map through an array it is throwing an error.

ERROR #85911  GRAPHQL

There was a problem parsing "website-name/src/templates/career.js"; any GraphQL
fragments or queries in this file were not processed.

This may indicate a syntax error in the code, or it may be a file type
that Gatsby does not know how to parse.

I'm mapping through the array as follows:

{career.thePerson.map((value) => (
   {value.info.info}
))}

I can't seem to pinpoint the syntax error or if there is an overall bug that I'm not seeing. Chances are I'm missing something!

There is an additional error message saying this:

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

website-name/src/templates/career.js: Unexpected token, expected "," (128:20)

  126 |             <CareerTitle>The Role:</CareerTitle>
  127 |             {career.thePerson.map((value) => (
> 128 |               {value.info.info}
      |                     ^
  129 |             ))}
  130 |             <CareerTitle>Responsibilities:</CareerTitle>
  131 |             {/*<CareerText dangerouslySetInnerHTML={{ __html: career.responsibilities.responsibilities}} />*/}

File: src/templates/career.js:128:20