Dealing with tags interspersed in blocks of text

[mas-4]

Hi,

I seem to have a very specific problem. In my current project I have defined a styled component for highlighted text (i.e., it just changes the color and bolds the text) and it breaks indentation. The indentation ends up looking like this:

const AboutPage = () => {
  return (
    <Layout>
    <SEO title="About" />
    <br /> {/* I don't know why but this is necessary to prevent page breakage */}
    <p>
    Euler Scientific is a partnership amongst software engineers, electrical
    engineers, optics engineers, mechanical engineers and numerous other senior
    engineering professionals.  We possess expertise in a number of disciplines,
    including mechanical and electrical design, high performance computing,
    power electronics, statistics, and both firmware and software.  We aim to
    offer the highest possible quality of engineering services that is
    characterized by innovation, practicality, open and clear communication, and
    integrity.
    </p>
    <Equation>
    <EquationImg src={EquationPNG} />
    <p>
    This equation, <Highlight>Euler's identity</Highlight>, exhibits the
    elegance and simplicity of the technical solutions that we strive for.
    Of course, real systems with practicality are always products of
    trade-offs, but <Highlight>balance</Highlight>,{' '}
    <Highlight>maintainability</Highlight>,{' '}
    <Highlight>robustness</Highlight>, and <Highlight>cost</Highlight> are
    our lodestars.
    </p>
    </Equation>
    </Layout>
  )
}

I don't know what to do about this, and it's rather irritating having to manually indent.