Using Antd + React.js, I am looking to create the following large "mega option" selector in place of the traditional Radio.Button experience.

I am currently able to lay these out as Card components with the hoverable option turned on (to add box shadow to the card when hovered). I would like to link these "Cards" as Radio Options such that they are accessible in my Form state just like a regular Radio.Button option.

Current "Card-like" Design: Final output should retain the style function just like a regular radio option.

<Form form={form} layout="vertical" name="add-form">
    <Form.Item
        name="type"
        label="Please select a type below:"
        rules={[
            {
                required: true,
                message: 'Please select your type',
            },
        ]}
    >
        <Row gutter={16}>
            <Col md={12}>
                <Card
                    hoverable
                    title="Radio Button 1"
                    extra={<CheckCircleFilled style={{ color: '#12cc55' }} />}
                >
        This is a short description of the radio button.
                </Card>
            </Col>
            <Col md={12}>
                <Card
                    hoverable
                    title="Radio Button 2"
                >
        This is a short description of the radio button.
                </Card>
            </Col>
        </Row>
    </Form.Item>
</Form>

I would really appreciate someone with a little more Antd custom component experience taking a look at this and showing how this can be converted to a radio option.

All resources I have seen so far are not Antd specific or don't show how it can be used with Antd forms. Much appreciated.