I am trying to sort data received from an API into a grid using Chakra-UI and it simply is not working, I am new to Chakra-UI so this probably seems super simple to most people but I cannot figure it out. How do I sort these into a grid with 4 or more columns? instead of it sticking to 1 and just flowing down the page?

I've tried a few different ways but none are working for me and this is what I have currently done this time I thought I'd ask, I've left my code below to show what I currently have and a screenshot to show what is happening.

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;