How to deselect row when clicked outside the table? [used: Material-UI DataGrid]

I'm using Material-UI tables for showing my data, and I'm stuck when it comes to deselecting selected row.

So when user clicks outside the table, row should be deselected.

This is my code

const showData2 = (e,data) => {
        console.log('selection',e)
    }

<div style={{ height: 180, width: "100%", backgroundColor:'white' }}>
                        <DataGrid
                            rows={cases}
                            density='compact'
                            columns={columnsCases}
                            pageSize={3}
                            hideFooterSelectedRowCount={true}
                            rowHeight={40}
                            onRowSelected = {(e)=>{showData(e)}}
                            onSelectionChange= {(e)=>{showData2(e)}}
                        />
                    </div>

Selection works perfectly but it seems impossible to deselect row when clicked outside the table

I would appreciate any idea and help.

Thank you!!

Use ClickAwayListener to detect if a click event happened outside of an element. It listens for clicks that occur somewhere in the document.

https://material-ui.com/components/click-away-listener/