Estoy tratando de clasificar los datos recibidos de una API en una cuadrícula usando Chakra-UI y simplemente no funciona, soy nuevo en Chakra-UI, por lo que probablemente parezca muy simple para la mayoría de las personas, pero no puedo resolverlo. ¿Cómo clasifico estos en una cuadrícula con 4 o más columnas? en lugar de quedarse en 1 y simplemente fluir hacia abajo en la página?

Probé algunas formas diferentes, pero ninguna funciona para mí y esto es lo que he hecho actualmente esta vez. Pensé en preguntar, dejé mi código a continuación para mostrar lo que tengo actualmente y una captura de pantalla para mostrar lo que tengo. está sucediendo.

 import axios from "axios"; import { chakra, Box, Image, Flex, Icon, useColorModeValue, HStack, VStack, Grid, Wrap, WrapItem, Container, Heading, Text, SimpleGrid } from "@chakra-ui/react"; import { MdHeadset, MdEmail, MdLocationOn } from "react-icons/md"; import { BsFillBriefcaseFill } from "react-icons/bs"; const Stores = ({stores}) => { if(!stores){ return <div>Loading...</div> } console.log(stores); return ( <> {stores.map((store) => ( <SimpleGrid columns={4} spacing={10} pl={6}> <Box height="400px"> <Text>{store.name}</Text> <Image src={store.imageUrl} /> <Heading>{store.vBucks}</Heading> </Box> </SimpleGrid> ))} </> ) } Stores.getInitialProps = async (ctx) => { try { const res = await axios.get("https://api.fortnitetracker.com/v1/store", { headers: { 'TRN-Api-Key' : 'XXX', 'Access-Control-Allow-Origin' : true, } }); const stores = res.data; console.log(stores) return { stores }; } catch (error) { return { error }; } }; export default Stores;