Checkbox.Group of ant design couldn't set the default value

I am developing an ant-design based react functional application. While using the Checkbox.Group, I found that I can't set the default value on a dynamically generated list of select boxes. My criteria is, when the custom modal is opened, depending on the loginId(an integer value) passed, the checkbox should be selected by default. If I unselect then it's fine. But on opening modal for the first time, default value should be set. I'm really trying for a long time, don't know what exactly I'm missing. Would be great if you please help.

here is my code,

export const ContactModal = props => {
const loggedInUser = props.loginUserDetail.id > 0 ? [props.loginUserDetail.id] : [];

console.log("loggedInUser= ",loggedInUser);


const title =
    props.contactType === contactTypesEnum[1] ? 'Select MMS contact person' : 'Select Industry contact person';

return (
    <Modal
        title={title}
        visible={props.isVisible}
        width={'60%'}
        afterClose={props.modalClose}
        onCancel={props.handleContactModalCancel}
        footer={[
            <Button key="back" onClick={props.handleContactModalCancel}>
                Cancel
            </Button>,
            <Button key="submit" type="primary" onClick={props.contactModalConfirm}>
                {/*<Button key="submit" type="primary" onClick={props.inputSubmit}>*/}
                Submit
            </Button>
        ]}
    >
        {/*<Form key={props.contactList}>*/}
        <Form>
           <div style=>
                
               
               {/*<Checkbox.Group defaultValue={[defaultValue]} onChange={props.handleCheckedInput}>*/}
                    <Checkbox.Group defaultValue={loggedInUser} onChange={props.handleCheckedInput}>
                    <Row style=>
                        {props.contactList.map((elem: { fullName: string; id: number }, index: number) => {
                            return (
                                <Col key={index} span={8}>
                                    <Form.Item> 
                                        <Checkbox value={elem.id}>{elem.fullName}</Checkbox>
                                    </Form.Item>
                                </Col>
                            );
                        })}
                    </Row>
                </Checkbox.Group>
            </div>
        </Form>
    </Modal>
);

};

The props.loginUserDetail, I'm passing looks like,

export interface ContactLogin {
id:number;
fullName:string;

}

and I checked very correctly that the id is getting populated and has non-zero positive value. Strangely if I hardcode defaultValue={[12]} the right checkbox is marked but the variable assignment of defaultValue={[loggedInUser]}

In the ant design specification I found that the defaultValue type should be string so I tried to use,

const loggedInUser = props.loginUserDetail.id > 0 ? props.loginUserDetail.id.toString() : '';

But it is also not working. If variable value is not selectable then defaultValue={[12]} shouldn't work too. BUt hard-coding is working.

Can anyone please help me out here ? Thanks much !