How can I add vertical spacing between Panels of Collapse in antd?

Question

I want to produce some spacing between the Panels of Collapse component offered in antd. By default the Panels are stuck to each other vertically. I would like some spacing between these Panels.

What I've tried:

1. Adding a marginTop in styling of each Panel
2. Using on top of the Panel code.

Both of these approaches break the Panel as the collapsible down Arrow disappears and the Panels are still stuck to each other.

My code:

<Collapse
          expandIconPosition = 'right'
          style = {{backgroundColor:"#ffff"}}
          >
        
              {products.map((product,index) => 
              (     
                  <div style={{marginTop:"1px"}}>
                  <Panel
                  key = {index}
                  header = {
                    <ProductDetails product = {product} index = {index}/>
                  }>
                      <div>Lorem Ipsum</div>
                  </Panel>
                  </div>
            
              ))}

  </Collapse>

Answer 1

The only way i've found was to make multiple "Collapse" components with single "Panel" on each

(instead of single Collapse with multiple panels in it).

You can specify the space between them with "Space" component if you want.

Working example:

https://codesandbox.io/s/antd-collapse-with-spacing-64bbgm?file=/src/App.js