How can I have an antd checkbox checked when its value is falsy inside an antd formItem?

Currently, what I would like to do is "inverse" the behavior of the antd checkbox component. I want to have the checkbox unchecked when the value / initialValue of the antD formItem is false. This is my current code

<FormItem
  label="Include skills list in the search"
  labelCol={{ span: 24 }}
  initialValue={false}
  valuePropName="checked"
  name="ignoreSkills"
>
  <Checkbox value={false} defaultChecked={true}>Search on Skills</Checkbox>
</FormItem>

Setting the defaultChecked={true} works fine if the checkbox is OUTSIDE the formItem but when it's inside, everything just breaks.

Things I tried:

1. Using the defaultChecked={true} alone. Doesn't work inside formItem
2. Using the checked={true} property. Doesn't work inside formItem

Any idea how I can achieve this inside the antd formItem?

You can use getValueProps & getValueFromEvent prop to achieve inverse behaviour. getValueFromEvent function provides a custom handler how to extract value from a particular event i.e. for checkbox we need to get value form e.target.checked. So we pass valuePropName="checked". You can inverse the value of checkbox using this function. Using getValueProps, you can define how to get value from props.

import { Checkbox, Form } from 'antd';

const App = () => {
    return (
        <Form>
            <Form.Item
                label='Include skills list in the search'
                labelCol={{ span: 24 }}
                valuePropName='checked'
                name='ignoreSkills'
                getValueProps={(value) => ({ checked: !value })}
                getValueFromEvent={(e) => !e.target.checked}
            >
                <Checkbox>Search on Skills</Checkbox>
            </Form.Item>
        </Form>
    );
};

export default App;