React Checkbox Component: Where Should I Keep State Changes?

In react-table, I've made a custom drop-down-menu component that appears when user clicks on a header of a column.

When user clicks on the option "Choose columns", a modal appears with checkboxes options where user can select which columns to show or hide.

This modal with the checkboxes options is in the drop-down-menu component. The problem is I can not figure out which is the best way to handle state changes. Should I keep state changes on both components (table component and drop-down-menu component)? Should I use redux for that? I'm going to use many tables, so the total number of columns will be very big. I'm really confused about all this.

You should have one source of truth. As the table will need this information, it should be saved in the table and passed to the drop-down-menu component.

Checkout this codesandbox example.