How to make a Gutenberg block with nested html elements?

Question

I am working on a custom Gutenberg block for a website. As you can see in the picture, the card element has a button with dual coloured text. The html of the same looks like

<a href="#"> Start now <span>$209/mo</span></a>

I used RichText component to add the text for the button. I created two RichText component for either part of the button text named btnTextS1 and btnTextS2 When I try printing those values in save() `

            {<RichText.Content
                tagName='span'
                    value={ btnTextS1 }
            /> }
            <span><RichText.Content
                value={ btnTextS2 }
            /></span>
        </a>`

Though I am able to see the out put as expected, when I come back to edit the page again gutenberg is throwing Block Recovery

The error was block validation failure due to output mismatch from save(). I observed the tag element is repeating in editor.

How Can I achieve the result, what am I doing wrong here?