How to correctly handle touchable widgets in a QML program

tomy

Hi all,
Part of my game includes a table in which there is a ball rotating. There are also two rectangles like rackets that a player can use for the game. At first for each racket I used a simple rectangle with a mouse area filling the rectangle and some drag properties. It was somewhat fine when I ran the program on my Desktop but on Android devices, touching (i,e. by finger) the rackets is:

hard making the game unpleasant
and also moving the rackets affects the movement of the ball!

So I searched the Web and faced MultiPointTouchArea and tried to use it in both rackets with that hope it solves the issues.

I used this code for each racket:

import QtQuick 2.9
    
    Rectangle {
        id: root
        width: 15; height: 65
        property int oldY: y
        property bool yUwards: false
        property bool yDwards: false
    
           onYChanged: {
               if(y > oldY)  yDwards = true
               else if (y < oldY)  yUwards = true
               oldY = y
           }
    
           MultiPointTouchArea {
            anchors.fill: root
            mouseEnabled: true
            minimumTouchPoints: 1
            maximumTouchPoints: 1
            touchPoints: [
                TouchPoint { id: root }
            ]
            drag.target: root
            drag.axis: Drag.YAxis
            drag.minimumY: table.y
            drag.maximumY: table.height - height - 10
        }
    }

But there are errors like:
qrc:/Racket.qml:22 id is not unique

OK, I can change root to some other id but drags are also the other problem! :(

I mean, what is the correct use of that method for the rackets to solve those two problems, please?