Reactjs - Controlling Multiple Checkboxes

Im building a CheckAllBoxes component in Reactjs. I have a list of items

fruits = {orange, apple, grape}

A general <SelectBox /> component to display and toggle the HTML checkbox

I need to build a <Fruits /> component to list all the fruits and each of item has its own <SelectBox />

Then I need to build a <SelectAll /> component which has a <SelectBox /> and when it is checked, it will toggle all the <CheckBox /> of <Fruits />

If any fruit is unchecked again, then the <SelectAll /> should be unchecked too.

The result should look something like this:

How can I get the <SelectAll /> to control other checkboxes ?