PrimeReact DataTable: How to (visually) deselect rows - reactjs

Question

I'm using a DataTable that has row selection via checkbox as well as a global search. The problem is that if I select one (or more) rows and then filter via the global search, the positions of the selected rows stay the same, e. g. if I select row one and two and filter, row one and two are still selected even if they have completely different content now because of the filtering. I even managed to reset the underlying selection in the state leading to nothing being selected in the state but the checkboxes are still checked. Resetting the DataTable doesn't do anything.
How do I (at least visually) reset the checkboxes? Thanks!
My code is as follows:
<InputText type="search" onInput={e =>
this.setState({
globalFilter: e.target.value,
selectedProjectListEntries: []
})}
placeholder={this.intl.formatMessage({id: "input.global-search.hint"})}
className={"form-control"}/>
<DataTable ref={el => this.dataTable = el}
value={this.state.projectListEntries} autoLayout={false}
globalFilter={this.state.globalFilter} rows={20}
className={'table table-striped'}
selection={this.state.selectedProjectListEntries}
onSelectionChange={e => this.setState({selectedProjectListEntries: e.value})}>
<Column selectionMode="multiple"/>
... Columns ...

Answer 1

If anyone else is using the DataTable without PrimeReact's CSS and theme, the following CSS is necessary to get it to work (in addition to using PrimeIcons):
body .p-checkbox {
display: inline-block;
vertical-align: middle;
margin: 0;
width: 20px;
height: 20px;
}
.p-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.p-hidden-accessible input, .p-hidden-accessible select {
-webkit-transform: scale(0);
transform: scale(0);
}
body .p-checkbox .p-checkbox-box.p-highlight {
border-color: $highlight_color;
background-color: $highlight_color;
color: #ffffff;
}
body .p-checkbox .p-checkbox-box {
border: 1px solid #a6a6a6;
background-color: #ffffff;
width: 20px;
height: 20px;
text-align: center;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-webkit-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-checkbox .p-checkbox-box {
width: 1.125em;
height: 1.125em;
line-height: 1.125em;
border-radius: 2px;
text-align: center;
}
body .p-checkbox .p-checkbox-box .p-checkbox-icon {
overflow: hidden;
position: relative;
font-size: 18px;
}
.p-checkbox .p-checkbox-icon {
display: block;
}
body .p-datatable .p-datatable-tbody > tr.p-highlight {
background-color: $highlight_color;
color: #ffffff;
}