ANTD InputNumber in Panel with Colpase stopPopagation on steppers click

I have used antd Collapse with Panel and added custom panel extra with InputNumber and Button. How to handle steppers button click to stop propagation to prevent Panel open/close

return (
<Collapse onChange={onPanelChange}>
  {ordersByCardIdGrouped.map(dItem => {
      return (
        <Panel header={`${dItem.cardName}: ${dItem.ordersTotal}`} key={dItem.key} extra={genExtra(dItem.ordersTotal)}>
          <Table

            columns={columns}
            dataSource={tableData}
            pagination={false}
            loading={false}
            rowSelection={{
              type: 'checkbox',
              ...rowSelection,
            }}
            expandable={configureExpandable}
          />
        </Panel>)
    },
  )
}
</Collapse>)

And here is Panels' extra

 const genExtra = (ordersTotal) => (
  <div className='px-1'>
    <Button
      className='mx-1'
      type="primary"
      onClick={event => {
        event.stopPropagation();
      }}
    >Select
    </Button>
    <InputNumber
      className='mx-1'
      style={{width: '70px'}}
      onClick={event => {
        event.stopPropagation();
      }}
      type="number"
      onChange={value=>{
        console.log(value);
      }}
      max={ordersTotal}
      min={0}
    /> orders
  </div>
)

Demo