changed logic when click on Antd Tab REACT - reactjs

Question

I'm using antd version 3 and want to change the outcome onChange when Tab is clicked.
Here the picture of my desire objective enter image description here
My tab title has a checkbox. Outcome should be in this way: when user is stand at Tab1 should have a possibility to change value checkbox of Tab2 or Tab3 without setting active Tab or moving to Tab2 or Tab3. I have read that tab didn't support HOC... I tried a lot of ways to solve but didn't work out with that. event.PreventDefault / event.stopPropagation similarly result. Even if handlers like onTabClick / onChange didn't set active Tab with a new key after checked checkbox active key is old but tab is render with new information.
Here example of custom tab title component with some extract from code
<Tabs
defaultActiveKey={'Tab 1'}
onChange={(key) => onChangeHandler(key)}
onTabClick={(key: string, event: MouseEvent) => onTabClick(key, event)}
>
<TabPane
tab={<Header name={'Tab1'} />}
key={'Tab 1'}
/>
<TabPane
tab={<Header name={'Tab 2'} />}
key={'Tab 2'}
/>
<TabPane
tab={<Header name={'Tab 3'} />}
key={'Tab 3'}
/>
const Header = ({
name,
onChange,
isActive,
id,
}) => {
return (
<div>
<Checkbox
isActive={isActive}
value={id}
checked={isActive}
onChange={onChange}
/>
<Title >{name}</Title>
</div>
)
}

Answer 1

As far as I understand you want the tabs not to change when you click on the check box.
To do this, you can pass the onClick function to the Checkbox and stop the event bubbling there
const Header = ({ name, onChange, isActive, id }) => {
return (
<div>
<Checkbox
isActive={isActive}
value={id}
checked={isActive}
onChange={onChange}
onClick={(e) => {
e.stopPropagation();
}}
/>
<Title>{name}</Title>
</div>
);
};