I just copied the example from here https://gluestack.io/ui/docs/components/actionsheet but the actionsheet wont work.


function App(){
const [showActionsheet, setShowActionsheet] = React.useState(false);
const handleClose = () => setShowActionsheet(false);
return (
#Unknown Channel
<Button onPress={() => setShowActionsheet(true)}>
<ButtonText>Open Actionsheet</ButtonText>
</Button>
<Actionsheet isOpen={showActionsheet} onClose={handleClose}>
<ActionsheetBackdrop />
<ActionsheetContent>
<ActionsheetDragIndicatorWrapper>
<ActionsheetDragIndicator />
</ActionsheetDragIndicatorWrapper>
<ActionsheetItem onPress={handleClose}>
<ActionsheetItemText>Edit Message</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem onPress={handleClose}>
<ActionsheetItemText>Mark Unread</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem onPress={handleClose}>
<ActionsheetItemText>Remind Me</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem onPress={handleClose}>
<ActionsheetItemText>Add to Saved Items</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem isDisabled onPress={handleClose}>
<ActionsheetItemText>Delete</ActionsheetItemText>
</ActionsheetItem>
</ActionsheetContent>
</Actionsheet>
</>
);
}