Great question! Every graphic designer has to learn this when they transition to typeface design. Within a font, there is a concept of a thing called winding. Points in a path are ordered, and if you walk through them in order they result in a clockwise or counterclockwise orientation for the path. This is the winding of the path.

Regular graphic design like SVG has no concept of winding. You won't find it anywhere in inkscape or illustrator or anywhere else you do graphic design. Winding is incredibly important for typeface design, though. Shapes with the same winding will show as the same, for example both filled with black. Overlapping shapes with different winding will invert where they overlap. This is how you get one shape to cut out from the other, you need to make sure the small interior shape has a different winding than the larger exterior shape.

In Glyphr Studio, when you select a path, you can see that paths winding in the path card on the left hand side. It's a toggle control, so you can select a path and flip it back and forth. It's very common when you're importing SVG that sometimes the windings don't work out like you expect, since there's no concept of winding in SVG graphic design programs often don't really care about the path point ordering of the code they export

In your case, you should simply select the interior path and click the winding toggle. That should give you your expected result!