Joystick moves unexpectedly in Unity

Context: I am using the FixedJoystick in Joystick Pack by Fenerax Studios on Unity asset store in my project.

The problem is whenever I touch the joystick (without even moving it), the handle immediately shifts to the upper right corner and my model moves downwards as a result.

Below is the image illustrating joystick issue:

The red cross in the image indicates where the user touches the joystick, the handle doesn’t move there as expected but jumps upwards instead.

Here is the code:

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class FixedJoystick : Joystick
{
    Vector2 joystickPosition = Vector2.zero;
    public GameObject heldDownBlockRegion;
    private Camera cam = new Camera();
    private bool inARMode = true;



void Start()
{
    joystickPosition = RectTransformUtility.WorldToScreenPoint(cam, background.position);
    gameObject.SetActive(false);

}


public override void OnDrag(PointerEventData eventData)
{
    Vector2 direction = eventData.position - joystickPosition;
    inputVector = (direction.magnitude > background.sizeDelta.x / 2f) ? direction.normalized : direction / (background.sizeDelta.x / 2f);
    ClampJoystick();
    handle.anchoredPosition = (inputVector * background.sizeDelta.x / 2f) * handleLimit;
}

public override void OnPointerDown(PointerEventData eventData)
{
    heldDownBlockRegion.SetActive(true);
    OnDrag(eventData);
}

public override void OnPointerUp(PointerEventData eventData)
{
    heldDownBlockRegion.SetActive(false);
    inputVector = Vector2.zero;
    handle.anchoredPosition = Vector2.zero;
}

public void changeToAR()
{
    showJoyStick(false);
    inARMode = true;
}

public void changeToNonAR()
{
    inARMode = false;
}

public void showJoyStick(bool action)
{
    if (!inARMode)
    {
        if (action == false)
        {
            heldDownBlockRegion.SetActive(false);
            inputVector = Vector2.zero;
            handle.anchoredPosition = Vector2.zero;
        }
        gameObject.SetActive(action);
    }
}
}

I am pretty new to this and would really appreciate any help. Thanks!

@cho_yangxuan I had this same problem but with the floating joystick. The first touch down would move my player object down left until release. I figured out a solution to simulate a pointer down and up at the Start method in the Joystick class. Here is the code:

    var pointer = new PointerEventData(EventSystem.current);
    ExecuteEvents.Execute(gameObject, pointer, ExecuteEvents.pointerDownHandler);
    ExecuteEvents.Execute(gameObject, pointer, ExecuteEvents.pointerUpHandler);