Bootstrap modal Wrong values being passed through function - reactjs

Question

As part of my application I have the following function in my react class for updating the state:
updateReplies(minorRevision, ParentCommentId) {
const ids = allComments.map(object => {
return object.Id;
});
console.log(ParentCommentId);
const localId = allComments[allComments.length - 1].LocalId + 1;
const itemId = this.state.currentUser.ItemId;
const name = this.state.currentUser.Name;
const newId = Math.max(...ids) + 1;
const comment = this.state.textAreaComment;
const recipients = this.state.selectedValues;
const commentDate = toIsoString(new Date());
const newComment = {
AttachmentId: null, Comment: comment, Commenter: { ItemId: itemId, Name: name },
Id: newId, IsDeleted: false, LocalId: localId, MinorRevision: minorRevision, ParentCommentId: ParentCommentId,
Recipients: recipients, Time: commentDate
};
allComments.push(newComment);
const groupedComments = groupByRevision(allComments);
this.setState({ Comments: groupedComments });
saveReply();
};
This is then past through a couple of functions before coming to the one where I will be passing the parameters through:
export function GetComments(props) {
return (
<React.Fragment>
{props.commentsArray.map((comment, index) => {
const localId = comment.LocalId;
const parentCommentId = comment.ParentCommentId;
const parentLocalId = allComments.filter(obj => obj.Id === parentCommentId);
const recipients = comment.Recipients;
let recipientsArray = [];
let recipientsList;
recipients.forEach(function (arrayItem) {
recipientsArray.push(arrayItem.Name);
recipientsList = recipientsArray.join(', ');
});
const date = new Date(comment.Time);
const formattedDate = date.toLocaleDateString() + " " + ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2);
return (
<div key={localId} className="comment-container">
<div key={comment.Commenter.ItemId} className="commenter">
<span className="id-label">{localId}</span>
{parentCommentId && (
<span className="reply" title={`in reply to ${parentLocalId[0].LocalId}`}>
<a className="reply" href={"#c" + parentLocalId[0].LocalId}>⤵</a> </span>
)}
<span><a id={"c" + localId} name={"c" + localId}>{comment.Commenter.Name}</a></span>
<div className="comment-actions-container">
<button type="button" className="btn-reply" data-value={comment.Id} title="Reply to comment" data-toggle="modal" data-target="#dlg-new-reply">💬</button>
</div>
</div>
<div className="modal fade" id="dlg-new-reply" tabIndex="-1" role="dialog" aria-labelledby="modalLabelLarge" aria-hidden="true">
<div className="modal-dialog modal-lg">
<div className="modal-content">
<div className="modal-header">
<h4 className="modal-title" id="modalLabelLarge">Reply</h4>
</div>
<div className="modal-body">
<span id="current-comment-display">{"Currently selected: " + comment.Id}</span>
<div className="address-list-container">
<Select placeholder="Send to ..." id="cboAddressees" isMulti name="addressees" onChange={props.getSelected} options={options} />
</div>
<textarea id="txtReply" onChange={props.getTextComment} name="reply"></textarea>
</div>
<div className="modal-footer">
<button type="button" className="btn" data-dismiss="modal" aria-label="Cancel">
<span aria-hidden="true">Cancel</span>
</button>
<button id="save-reply" type="button" onClick={() => props.setChange(comment.MinorRevision, comment.Id)} className="btn">Save</button>
</div>
</div>
</div>
</div>
<div id={"recipients-" + comment.Id} className="recipients">{recipientsList}</div>
<div className="comment">{comment.Comment}</div>
<div className="comment-footer">{formattedDate}</div>
<GetReplies Id={comment.Id} />
</div>
);
})}
</React.Fragment>
);
}
Now for here, for each comment I am rendering these elements and this works fine however, when we get to this part:
<button id="save-reply" type="button" onClick={() => props.setChange(comment.MinorRevision, comment.Id)} className="btn">Save</button>
I am having some issues, I am not getting any errors but the wrong values are getting passed through, instead of the MinorRevision and Id of that individual comment, it is just passing through the values of the very last comment if that makes sense.
What I am finding confusing is that for the rest of it, I am not having that issue like for example in here:
<button type="button" className="btn-reply" data-value={comment.Id} title="Reply to comment" data-toggle="modal" data-target="#dlg-new-reply">💬</button>
I am getting the correct Id, so at the moment the highest Id value is 158 and MinorRevision value is 2 and no matter which element I am clicking on, that is what is passed through props.SetChange and I have no idea why that would be the case
Edit -
So the problem seems to be with using bootstrap modal and I have no idea why this would be happening. When the modal is opened, it will show the very last of the comment objects but everything underneath the modal i.e:
<div className="comment">{comment.Comment}</div>
will show the correct values, so it is something to do with the modal but I'm just not sure what