How to correctly fill the grid antd with data from the server

I made such a grid using grid antd . code here.

const {  Row, Col  } = antd;

const App = () => (
  <Row>
    <Col className={'first'} span={16}>
        <img src="https://picsum.photos/800/400?random=1"/>
    </Col>
    <Col span={8}>
      <Row>
         <Col className={'second'} span={24}>
           <img src="https://picsum.photos/800/400?random=2"/>
         </Col>
         <Col className={'third'} span={24}>
           <img src="https://picsum.photos/800/400?random=3"/>
         </Col>
      </Row>
    </Col>
  </Row>
)
const ComponentDemo = App;


ReactDOM.render(<ComponentDemo />, mountNode);

I'm getting data from the server. There may be more than 3 of them there. I should output the first 3 like this. The rest will be displayed after pressing the button. How can this effect be achieved in myData.map(). To output these elements without using indexes?

I will try do somthing like this

                dataSale.slice(0,maxCount).map(({...item},index)=>(
                    (index===0)?(
                        <Col key = {index}  span={16}>
                            <SaleCard {...item}/>
                        </Col>
                        ):(
                            <Col key={index} span={8}>
                                <SaleCard {...item}/>
                            </Col>
                    )

                ))