CSS styling overridden by another component

Question

I have a React project and a page that has the following components:

return (
   <div>
      <ComponentA />
      <ComponentB />
   </div>
);

Both ComponentA and ComponentB have integrated with the same component, let's call it CommonComponent. It looks like this (simplified):

const CommonComponent = (props) => {
  return <span className={`commonComponentStyling, ${props.providedStyling}`}>
            {props.text}
         </span>
}

CSS of CommonComponent:

.commonComponentStyling {
   color: red;
}

The integration with CommonComponent looks like this:

const ComponentA = () => {
   return (
      <CommonComponent providedStyling={'stylingComponentA'} text="Foo" />
   )
}

with CSS:

.stylingComponentA {
    color: blue;
}

---

const ComponentB = () => {
   return (
      <CommonComponent providedStyling={'stylingComponentB'} text="Bar" />
   )
}

with CSS:

.stylingComponentB {
    font-weight: bold;
}

---

Problem: I am experiencing a problem where if I were to only render ComponentA on my page, the text Foo will be correctly rendered in blue color. However, if I were to also render ComponentB on the same page, the text Foo will now be rendered in red colour (it switches back to the default styling of CommonComponent).

While Foo will not have a bold font, it's not longer in the correct colour, even though I am using CSS modules.

Can someone help explain what's happening here, why and how?