// while accessing the object values from data, I'm getting undefined in map

// ../data/section1

const data = [{
    id: 1,
    image: './images/homepage/xbox-games.png',
    text: 'Buy Xbox games and consoles',
}, {
    id: 2,
    image: './images/homepage/shop_surface_devices.webp',
    text: 'Shop surface devices',
}, {
    id: 3,
    image: './images/homepage/choose_your_ms_365.png',
    text: 'Choose your Microsoft 365',
}, {
    id: 4,
    image: './images/homepage/shop_windows_10.png',
    text: 'Shop Windows 10',
}]
export default data;

// the actual component

    import data from "../data/section1";
    
    const Section1 = () => {
    
      return (
        <>
            <div class="mx-20">
                {data.map((vals) => {
                  <div class="">
                    <img src={vals.image}/>
                    <p>{vals.text}</p>
                  </div>
                })}
            </div>
        </>
      )
    }
    
    export default Section1;