React - Show details by ID in different page

Question

I'm making a basic portfolio with react, and I'm utilising props to display each project I made. The projects are displayed on the homepage through a card component. Once I click on the specific project, I would like to get the ID of the (clicked) project and display it's information such as name and category in a banner component which is subsequently displayed in the Project page. I'm just getting started with react so I'm quite confused as to how this works despite it probably being very simple.

Home.js

function createCard(project) {
  return <Card 
    key={project.id} 
    name={project.name}
    img={project.img}
  />
}

function Home() {

  return (
      <div className="grid-container">
         {projects.map(createCard)}  
       </div>
      )
}

export default Home;

Projects.js

const projects = [
  {
    id: 1,
    name: "Dissertation Project",
    img: thumb1,
    tech: ["HTML", "SCSS"],
    category: ["Web Development", "Usability Testing"]
  },

  {
    id: 2,
    name: "Cinema Booking System",
    img: thumb2,
    tech: "",
    category: [""]
  }
]
export default projects;

Banner.js

import React from 'react';
import thumb from '../images/thumb-1.jpg';

function Banner (props) {
  return(
    <React.Fragment>
      <div class="project__banner">
        <h2 class="project__banner-heading">{props.name}</h2>
      </div>
      <div class="project__desc">
        <div class="project__desc--1">{props.category[0]}</div>
        <div class="project__desc--2">{props.category[1]}</div>
      </div>
    </React.Fragment>
  )
}

export default Banner;

Project.js

import React from 'react';
import Banner from '../Banner';

function  Project () {

  return (
    <React.Fragment>
      <Banner />
    </React.Fragment>
    
  )
}

export default Project;

I hope this is somewhat clear. Any help would be greatly appreciated.