I am having a hard time getting my UI to work.

Basically I have a canvas with a UI image A that is the size of the screen. This image has raycast enabled and if effectively receiving inputs.

Not in the canvas I have a sprite B that have a 2D collider attached to it. No matter what I try, the UI image is always consuming the input event when I click on the sprite.

When I disable the image A , the sprite B gets the events, so the setup looks right (camera with Physic2D raycaster for the sprite B, layerMask set to the layer of the sprite B, canvas with Graphic raycaster for the image A, no blocking object, no mask).

What do I need to do so that the sprite B gets the input event BEFORE the image A and consume it?


**EDIT:**
Those two elements are part of the UI and must be interactable at all time. I use a sprite for the second element as it is dragged from the UI inside the game and I don't want to make it an image.

The image A is a big cancel button with opacity 0 on the whole screen that must be active at all time.

I just want to know if the Collider of sprite B can intercept the input before the image A. If it isn't possible, I'll create an Image B instead of the sprite B and destroy it to create a Sprite with the same texture when the  is interacted with.