Underlying PinchArea steals event from MultiPointTouchArea

Consider the following code:

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
  id: main
  visible: true
  width: 1920
  height: 1080

  PinchArea {
    anchors.fill: parent
    onPinchUpdated: tt.text = pinch.scale
    pinch.target: rect
    Flickable {
      contentWidth: 2000
      contentHeight: 2000
      anchors.fill: parent
      Rectangle {
        id: rect
        width: 200
        height: 200
        color: "green"
        x: 500
        y: 300
      }
    }
  }

  Text {
    anchors.centerIn: parent
    id: tt
  }

  Rectangle {
    width: 200
    height: 200
    anchors.verticalCenter: parent.verticalCenter
    color: "blue"
    MultiPointTouchArea {
      anchors.fill: parent
      minimumTouchPoints: 1
      maximumTouchPoints: 1
      onPressed: parent.color = "red"
      onReleased: parent.color = "blue"
    }
  }
}

It clearly illustrates the problem - if the flickable is touched while the "button" is pressed, this results in a pinch gesture, even though there is only one touch point in the pinch area and the other is supposed to be part of the button. Also, releasing the button doesn't revert its color back, released() is never emitted, the event is effectively stolen from the underlying pinch area.

If the intent behind this code is unclear - the goal is implement an on-screen modifier button for interacting with the view (the Flickable). Unfortunately, as soon as the pinch area is introduced for scaling the view, this causes the stealing of the touch event from the button by the pinch area. As a result the Flickable becomes unresponsive to single touch input and the modifier button gets stuck.

Attempts to get it working by rearranging the order and structure of elements have failed.