请问如何进行使用添加Button在antd/Collapse 的label上，点击Button，不触发折叠的事件？

基于antd 的 折叠块 我使用此代码做到：

折叠块的使用（添加了一个按钮）

import type { CollapseProps } from 'antd';
import { Collapse, Button } from 'antd';

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;

const items: CollapseProps['items'] = [
  {
    key: '1',
    label: <div><span>This is panel header 1</span><Button 
      onClick={(e) => {
        if(e.preventDefault) {
          e.preventDefault()
        }
        
        console.log(e)
        console.log('123')
      }}
    >您好</Button></div>,
    children: <p>{text}</p>,
  },
  {
    key: '2',
    label: 'This is panel header 2',
    children: <p>{text}</p>,
  },
  {
    key: '3',
    label: 'This is panel header 3',
    children: <p>{text}</p>,
  },
];

const TestComp: React.FC = () => {
  const onChange = (key: string | string[]) => {
    console.log(key);
  };

  return <Collapse items={items} defaultActiveKey={['1']} onChange={onChange} />;
};

export default TestComp;

基于此折叠款，我加了一个按钮，但是现在有一个需求就是点击折叠块上面的header可以折叠，但是我不想点击button它也折叠。我尝试了用：

if(e.preventDefault) {
  e.preventDefault()
}

但是并不生效。