I am trying to store Chakra-UI's CheckboxGroup values in Firebase as a string of multiple elements. However, in the code I am using (below) I only get stored the last value selected. In other words, if I selected 'Valor1' and then 'Valor3', for example, 'Valor3' would be the only information stored in the corresponding Firebase string. I believe this is because of how onChange is defined, but even though I have tried several modifications I don't know how to fix it.

Code:

import {useState} from 'react'
import {useRouter} from 'next/router'
import axios from 'axios'
import {
  Box,
  FormControl,
  FormLabel,
  FormErrorMessage,
  FormHelperText,
  Button,
  Checkbox,
  CheckboxGroup,
  HStack,
} from '@chakra-ui/react'
import {Container} from '../components'

const Post = () => {
  const router = useRouter()
  const [content, setContent] = useState({
    cbox:'',
  })

  const onChange = e => {
    const {value, name} = e.target
    setContent(prevState => ({...prevState, [name]: value}))
  }

  const marginBetweenElements = 4

  return (
    <Container>
      <Box my={10} bgColor="white" p={6} borderRadius="md">
        <FormControl id="cbox" mb={marginBetweenElements} as="fieldset" isRequired>
          <FormLabel as="legend">CheckboxGroup test</FormLabel>
          <CheckboxGroup onChange={onChange} variant="filled">
            <HStack spacing="24px">
              <Checkbox type="text" name="cbox" value="Valor1">Valor1</Checkbox>
              <Checkbox type="text" name="cbox" value="Valor2">Valor2</Checkbox>
              <Checkbox type="text" name="cbox" value="Valor3">Valor3</Checkbox>
              <Checkbox type="text" name="cbox" value="Valor4">Valor4</Checkbox>
            </HStack>
          </CheckboxGroup>
        </FormControl>
        <Button onClick={onSubmit} mt={5}>
          Submit
        </Button>
      </Box>
    </Container>
  )
}

export default Post