Some questions with the render order of the UIs in Unity3D.

Found something beyond my understanding.

So I create two images and one text overlapping one of the images.

This is how they are ordered in Hierachy.

What's confusing me is that, when I check the frame debugger there are three batches. To be more specific, they are: the Red image -> the text -> the White image.

As some official article I've read, "Unity UIs are constructed back-to-front, with objects’ order in the hierarchy determining their sort order. Objects earlier in the hierarchy are considered behind objects later in the hierarchy. Batches are built by walking the hierarchy top-to-bottom and collecting all objects which use the same material, the same texture and do not have intermediate layers."

In my understanding, the text should be rendered before the two images,and that the batches should be 2 rather than 3. So what's really happening here?