Estoy tratando de extender el tema de la interfaz de usuario de chakra, pero recibo este error.

error - Error: los objetos no son válidos como elemento secundario de React (encontrado: objeto con claves {semanticTokens, dirección, puntos de interrupción, índices z, radios, desenfoque, colores, espacios entre letras, alturas de línea, pesos de fuente, fuentes, tamaños de fuente, tamaños, sombras, espacio, bordes , transición, componentes, estilos, configuración}). Si tenía la intención de representar una colección de niños, use una matriz en su lugar.

Aquí está mi código.

 import { extendTheme } from '@chakra-ui/react' import { mode } from '@chakra-ui/theme-tools' const styles = { global: props => ({ body: { bg: mode('#f0e7db', '#202023')(props) } }) } const components = { Heading: { variants: { 'section-title': { textDecoration: 'underline', fontSize: 20, textUnderlineOffset: 6, textDecorationColor: '#525252', textDecorationThickness: 4, marginTop: 3, marginBottom: 4 } } }, Link: { baseStyle: props => ({ color: mode('#3d7aed', '#ff63c3')(props), textUnderlineOffset: 3 }) } } const fonts = { heading: "'M PLUS Rounded 1c'" } const colors = { grassTeal: '#88ccca' } const config = { initialColorMode: 'dark', useSystemColorMode: true } const theme = extendTheme({ config, styles, components, fonts, colors }) export default theme