How to control two elements separately for toggling states to `true` and `false`.Is there a way to simplify this code? Writing different states and functions for every component seems to be the wrong approach. And what if there would be more than two components?

```
 const [active, setActiveItem] = React.useState(false);
    const [active2, setActiveItem2] = React.useState(false);

      function toggle() {
        setActive((active) => !active);
      }

      function toggle2() {
            setActiveItem2((active) => !active);
        }

      return (
        <View style={styles.row}>
          <CustomButton onPress={toggle} active={active} />
          <CustomButton onPress={toggle2} active={active2} />
        </View>
      );
    }

```