JSX/React: changing state of checkbox from another component

I currently have a bunch of components that I am building out to display a card view (closest example looks like this: https://n43z9w3o0.codesandbox.io/).

Instead of an image in the upper right corner, however, there would be a checkbox. I have 3 components I'm using to do this:

1. card.tsx, which is a functional component that has maps the names and descriptions to each card.
2. toolbar.tsx, which is a class component that will allow the user to interact with the cards (delete cards, select all checkboxes, etc.) through an upper toolbar.
3. cardview.tsx which is a class component that I believe needs to have all the functions that allow the toolbar actions to change the state of the card view (again: deletion, checkboxes)

How can I do this? For example, I need to select all the checkboxes from a selectAll function, but that function is in the toolbar file. The checkbox component is in the card file, and that component looks for an isChecked prop. But the value of that prop is updated in the toolbar component, so I can't simply put the value of the prop from toolbar. How would I get the correct value?

I'm confused as to what would be the best way to go about this... refs? context? Any guidance would be very much appreciated. Thank you!