I have a parent component which has a list of mapped out cards. Inside these cards, they each have their own state etc and features from an API. When selected, the card will turn blue based off this state. What I would like to do is only have 1 card active at a time, however I am not sure how to do this given that the state is in the child component. How would i feed the state back up and implement only 1 active component? I would also like to use this state in the parent component as I plan to pass back the active selection state and map it into the

Parent Component:

const JobListing = () => {


            <BottomReturnMaster>
              <FilterInterior>
                {/* BELOW IS WORKING */}
                  {
                    jobs.length > 0 && 
                    jobs.map(
                      (job) => 
                      <JobCard 
                      key={job.id} 
                      job={job}
                      
                      />)
                  }
              </FilterInterior>
              

              <JobInsightsInterior>
                <TopSectionGeneralContainer>
                  What's the details of this job?
                </TopSectionGeneralContainer>
              </JobInsightsInterior>
            </BottomReturnMaster>

  )
}

export default JobListing

And also, my state is managed in the isSelected useState. as of right now, when the card is selected it will go blue as planned. The issue is I would only like one active card at a time.

Child component:

const JobCard = ({ job }) => {

  const [open, setOpen] = useState(false)
  const [isSelected, setIsSelected] = useState(false);


  return (
    
      <CardContainer>
        {/* BELOW WORKING */}
        <CardPrimary onClick={() => setIsSelected(true)} className={isSelected ? "css-class-to-highlight-div" : undefined}>
          <CardHeader>
            <CardHeaderTopRow>
              <Typography variant = "cardheader1">
                {job.title}
              </Typography>

            </CardHeaderTopRow>
            <Typography variant = "subtitle4" color="text.secondary">
              {job.company.display_name}  
            </Typography>
          </CardHeader>

          <CardSecondary>

     

          </NewDateContainer>
          </CardSecondary>
        </CardPrimary>
      </CardContainer>
  )
}

export default JobCard