Primefaces datatable group unselect all the rows when checkbox is unselected

Question

I am using Primefaces 8.0

I have datatable with group row and by default all rows are selected.

When i unselect second checkbox, i want to unselect both USA-North and USA-South. how to do that? Please help.

public class Data {
    private String countryName;
    private Short id;
setters and getters....
...

Bean

private List<Data> dataToDisplay;
private List<Data> selectedData;
method() {
   dataToDisplay.add(data);
   selectedData = dataToDisplay;
}

html

<p:dataTable id="data" var="data" rowKey="#{data.id}" value="#{bean.toDisplay}" selection="#{bean.selectedData}" 
    <p:columnGroup type="header">
        <p:row>
            <p:column style="width:30px;"/>
            <p:column headerText="Country"
                      escape="false" style="white-space:pre-line;width:100%;"/>
        </p:row>
    </p:columnGroup>

    <p:column id="id" required="true" selectionMode="multiple" style="width:30px;text-align:center" groupRow="true">
        <p:column required="true" style="width:30px;text-align:center">
            <h:outputText style="color:white" value="#{data.id}"/> <!-- if i remove this line. I get only one checkbox for all 3 rows -->
        </p:column>
    </p:column>

    <p:column id="country">
        <h:outputText value="#{data.countryName}"/>
    </p:column>

</p:dataTable> 

One more issue is that, if i am not displayingthe id along with the checkbox, check box is not grouped. Just getting one checkbox for all 3 rows. Please help on this too.

Tried to change in the selection variable selectedData. But no luck.