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

Question

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={{ overflowY: 'scroll' }}>
{/*<Checkbox.Group defaultValue={[defaultValue]} onChange={props.handleCheckedInput}>*/}
<Checkbox.Group defaultValue={loggedInUser} onChange={props.handleCheckedInput}>
<Row style={{ border: '1px solid #009FE3', paddingLeft: '10px' }}>
{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.
THis is how I'm calling the custom modal,
this is how I'm calling the modal ,
<ContactModal
isVisible={modalVisibilty}
//modalClose={modalClose}
contactList={contactList} //this would be number of contact returned
handleContactModalCancel={handleContactModalCancel}
contactModalConfirm={contactModalConfirm}
handleCheckedInput={handleCheckedInput}
//contactListError={contactListError}
contactType={contactType}
loginUserId={contactType === contactTypesEnum[2]?loginUserDetail.id:0}
//loginUserDetail={contactType === contactTypesEnum[2] ?loginUserDetail : {id:0,fullName:''}}
/>
Can anyone please help me out here ? Thanks much !