React JS inline styles working on only one component instance

I have a custom react component called Subtitle.

import React from "react";
import "./Subtitle.css";
const Subtitle = ({ theme, textGroup }) => {
  return (
    <div>
      <div className="Subtitle__heading">
        <div className="p__heading">
          <p>
            <span style={{ color: theme.lifeJourney }}>{textGroup.text1}</span>{" "}
            {textGroup.text2}
          </p>
        </div>
      </div>
    </div>
  );
};

export default Subtitle;

The component takes in a theme prop. The theme is an object that specifies what colors the component should render.
I pass in the inline styles fairly comfortably and call the component several times on the page inside other components. Problem Is the inline styles only work on the first call. The second time I use the component. It runs but it contains no styling.

I don’t get it. what I am doing wrong here? Please help.