Trying to nest Text components with different font properties inside another Text component. In one case, the line height cuts some of the text

I have a React Native application and I am trying to create a sentence where the different words have different styles, so I created a Text component and tried nesting other Text components with different styles inside of it. For example this works fine:

        <Text>
            <HeaderText2>Hello</HeaderText2>
            <HeaderText6>From</HeaderText6>
            <HeaderText2>The Other Side</HeaderText2>
        </Text>

And the result is:

However, if I swap the components so that the component with smaller line-height and font-size is first, it breaks somehow and nothing gets rendered.

        <Text>
            <HeaderText6>Hello</HeaderText6>
            <HeaderText2>From</HeaderText2>
            <HeaderText6>The Other Side</HeaderText6>
        </Text>

And this is how my HeaderText2 and HeaderText6 styled components look like:

const HeaderText2 = styled.Text`
    font-size: 30px;
    line-height: 39px;
`;

const HeaderText6 = styled.Text`
    font-size: 12px;
    line-height: 16px;
`;

Anyone have any clue why this might be happening? It’s important to remember that this is React Native, so there might be some React Native shenanigans happening. When I delete the line-height of both components, it works fine but I want the line-height of the component with bigger line-height to take precedence and not be without line-height.