Display different strapi project ids with reactjs

Question

For background, I'm using ReactJS, GatsbyJS along with Strapi CMS for the backend.

I have a content type called projects.

My problem is that I can't figure out how to display just one unique project in one column in bootstrap (ex: col-md-6) without it just repeating the contents twice.

I have tried using the map function, which is just repeating itself.

Expected Outcome screenshot of expected outcome

Thanks for your help!

../pages/portfolio.js

import React from 'react';

import Layout from '../components/Layout'
import NavAbout from '../components/about/navAbout'
import PortfolioMain from '../components/portfolio/portfolioMain'
import ServicesCTA from '../components/services/servicesCTA'
import Footer from '../components/Footer'
import { graphql } from 'gatsby'


export default function Portfolio( {data:{allStrapiProjects:{nodes:projects}}} ) {



  return(
    <Layout>
      <NavAbout />
      <PortfolioMain projects={projects}/>
      <ServicesCTA />
      <Footer />
    </Layout>
  )

  
}



export const query = graphql`
  {
    allStrapiProjects {
      nodes {
        id
        avatar {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
        category
        date(formatString: "MM-DD")
        desc
        mockup {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
        title
        website
        strapiId
      }
    }
  }
`

../components/portfolio/portfolioMain.js

import React from 'react'

import {
    Container,
    Row,
    Col,
    Button,
    Badge,
    Card,
    CardBody,
    CardHeader
} from 'reactstrap'



import PortfolioModal1 from '../../assets/js/PortfolioModal1'

import {   graphql } from 'gatsby'
import { render } from 'react-dom'
import Project from '../portfolio/project'






const PortfolioMain = ( {projects}) => {

    return <section className="section projects-3 mt-5">
        <Container>
            <Row>
                <Col className="mr-auto ml-auto text-center col-md-8">
                    <h6 className="category text-muted">
                        My Work
                    </h6>
                    <h2 className="title mb-5">
                        Some of my recent projects
                    </h2>
                </Col>
            </Row>
        
            <Row>
                <Col className="mx-auto col-md-6">
                   <h3>Project One Here</h3>
                </Col>
                <Col className="mx-auto col-md-6 text-center">
                    {projects.map((project, index) => {
                        return <Project key={project.id} index={index} {...project} />
                    })}
       
                </Col>
            </Row>
            
        
         
        
        </Container>
        


    </section>
}

export default PortfolioMain

../components/portfolio/project.js

import React from 'react'
import PropTypes from 'prop-types'
import {
    Container,
    Row,
    Col,
    Card,
    CardHeader,
    CardBody,
    Button
} from 'reactstrap'

import Image from 'gatsby-image'

import PortfolioModal1 from '../../assets/js/PortfolioModal1'

const Project = ( {category, date, desc, title, website, index, avatar, mockup}) => {
    return <div>
        <h3>{title}</h3>
        
    </div>

        
    
}

export default Project