Cannot dismiss popup on touch outside

[ydhnwb]

I cannot dismiss the popup menu on touch outside. It just dont trigger anything.

I put MenuProvider in App.tsx, like this:

    <MenuProvider>
      <ReduxProvider store={flux.store}>
        <ReduxNetworkProvider shouldPing pingInBackground pingInterval={90}>
          <PersistGate persistor={flux.persistor}>
            <SafeAreaProvider>
              <StatusBar backgroundColor={'white'} barStyle="dark-content" />
              <App />
              <Toast ref={(ref: any) => Toast.setRef(ref)} />
            </SafeAreaProvider>
          </PersistGate>
        </ReduxNetworkProvider>
      </ReduxProvider>
    </MenuProvider>

And I'm using a state to control when popup should show or hide. Like this.

        <Menu opened={filterPopupOpen}> //filterPopUpOpen is like usestate of boolean
          <MenuTrigger
            customStyles={{
              TriggerTouchableComponent: FilterButton,
              triggerTouchable: {title: 'Select (Custom Touchables)'},
            }}
          />

          {props.sortOptions && props.sortOptions()}
        </Menu>

But when touch outside, it wont dismiss.
How to handle this? Because I'm using a usestate