ClickOutside

<State initial={{ counter: 0, isWatching: false }}>
  {({ state, setState }) => (
    <div>
      <div>Current Count: {state.counter}</div>
      <ClickOutside
        onClickOutside={() => {
          state.isWatching && setState({ counter: state.counter + 1 })
        }}
      >
        <Card>
          <div className="p-4">
            <Button
              onClick={() => setState({ isWatching: !state.isWatching })}
            >
              {state.isWatching ? 'Stop Watchig' : 'Start Watching'}
            </Button>
            <BodyText>
              Click the button to start watching clicks outside the card.
              Click the button again to stop watching.
            </BodyText>
          </div>
        </Card>
      </ClickOutside>
    </div>
  )}
</State>