<Box bg="gray-100" p="2xs" borderRadius={5}>
    <Actionable action={()=>setState('show', s => !s)}>
        <Flexbox flexDirection="row" justifyContent="space-between" alignItems="center">
            <Text fontSize="2xl" fontWeight="bold">{data.faq.question}</Text>
            <Icon size={24} icon="entypo:chevron-right" />
        </Flexbox>
    </Actionable>
    <Collapsible collapsed={!state.show}>
        <Box mt={10}>
            <Text variant="body-md">{data.faq.answer}</Text>
        </Box>
    </Collapsible>
</Box>

{
  "faqs": [
    {
      "id": "1",
      "question": "Where is this located?",
      "answer": "This is a collapsible block, which can expand and collapse."
    },
    {
      "id": "2",
      "question": "What is that?",
      "answer": "This is a collapsible block, which can expand and collapse."
    },
    {
      "id": "3",
      "question": "What are the accepted payment methods?",
      "answer": "This is a collapsible block, which can expand and collapse."
    }
  ]
}