Entire list re-renders due to the click handler

I am using Material UI to render a grid of cards with a button on it. The problem I have is that every time I change a Select component on the parent, it re-renders the entire grid and it is really slow.

He is a simplified version of the set up.

Whenever I change the Select component, the entire grid re-renders.

    // Page.js

export default function Page() {
  const [target, setTarget] = useState('
');

  const handleButtonClick = (cardName) => {
    console.log(`${target} was the target of ${cardName}`}
  }
  
  return(
    <div
      <TargetSelect setTarget={setTarget} />
      <Grid>
        <GridCard cardName="Card 1" handleButtonClick={handleButtonClick} />
        <GridCard cardName="Card 2" handleButtonClick={handleButtonClick} />
        <GridCard cardName="Card 3" handleButtonClick={handleButtonClick} />
        <GridCard cardName="Card 4" handleButtonClick={handleButtonClick} />
      </Grid>
    </div
  )
}

What am I doing wrong that this is happening?