QML Treeview's Header delegate is not accepting left mouse click

If i have to customize the header of QML treeview For ex. sometimes i may need to display an icon in column header instead of column header text , then i have to modify the header delegate of QML treeview.

Then if i want to perform some action when a column header is clicked (for ex. sorting the records according to column selected) then i need to include MouseArea inside header delegate. But this mousearea is not accepting the left click in any condition. Due to this i'm not able to click the column and do some action on mobile devices.

sample code:

TreeView{
    height:200
    width:200

    headerDelegate:Rectangle{

        height :20
        width: 100

        MouseArea{
            anchors.fill:parent
            onClicked:{
                 console.log("This is never get called");
            }
      }
}

I have also considered following conditions

1. i dont want to use clicked event of QML treeview because i have customized my item delegate and it also has MouseArea in it. As per documentation if item delegate has mousearea then "clicked" signal is not generated.

2. QML Treeview is based on Tableview so i think the same condition happens in Tableview's header delegate.