Antd Checkboxes deselect after re-rendering component - reactjs

Question

I'm trying to create antd Checkbox.Group that consists of normal checkboxes as well as the "New Value" checkbox, selecting which would change the showForm state and result in showing input-fields.
I would like to be able to select both regular and hardcoded checkbox simultaneously. However, when I change the state of component which re-renders it, all checkboxes (including "New Value" one) automatically deselect.
Is there a way to prevent it?
antd version: ^4.22.7
checkboxes.tsx:
import {useCallback, useState} from "react";
import {CheckboxValueType} from "antd/lib/checkbox/Group";
import {Checkbox, Input} from "antd";
export interface CheckboxValuesModel {
name: string;
value: string;
}
const Checkboxes = () => {
const [showForm, setShowForm] = useState(false);
const toggleShowForm = useCallback((values: CheckboxValueType[]) => {
setShowForm(!!values.find(val => (val as unknown as CheckboxValuesModel).name === null));
}, []);
const checkboxValues: CheckboxValuesModel[] = [
{
name: 'A',
value: 'A'
},
{
name: 'B',
value: 'B'
},
]
return <>
<Checkbox.Group onChange={checkedValue => toggleShowForm(checkedValue)}>
{
checkboxValues.map(value => (
<Checkbox key={value.name} value={value}>
{value.name}
</Checkbox>
))
}
<Checkbox value={{name: null, value: null}}>
New Value
</Checkbox>
</Checkbox.Group>
{
showForm &&
<>
<Input name={'name'}></Input>
<Input name={'value'}></Input>
</>
}
</>
};
export default Checkboxes;
CodeSandbox link:
https://codesandbox.io/s/happy-water-npqxii