Estoy tratando de almacenar los valores de CheckboxGroup de Chakra-UI en Firebase como una cadena de elementos múltiples. Sin embargo, en el código que estoy usando (a continuación) solo obtengo almacenado el último valor seleccionado. En otras palabras, si seleccioné 'Valor1' y luego 'Valor3', por ejemplo, 'Valor3' sería la única información almacenada en la cadena de Firebase correspondiente. Creo que esto se debe a cómo se define onChange , pero aunque he intentado varias modificaciones, no sé cómo solucionarlo.

Código:

 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