React conditional className the class name itself is changing but css is not updating

I'm adding to a current project. I'm working with a parent and child component. When a marker is clicked on a map I need to conditionally change the className within the child component.

Code within Parent component has two divs affected by Parents state. The first div works correctly and slides up like it should. But the ChildComponent only changes the className without the actual css taking affect.

<ParentComponent>
  <div>
    <div className={`${this.state.openCard ? 'container-opened' : 'container'}`}>
      ...
    </div>
    <ChildComponent displayCard={this.state.openCard} />
  </div>
</>

Here is code of Child Component.

const ChildComponent = props => {
  ...
  return (
    <div id='marker' className={`${props.displayCard ? "opened" : "closed"}`}>
      <Card />
    </div>
  )
}

Like I said I'm trying to get the css to apply. What am I missing? When the prop switches it removes the className and css from ChildComponent but it only adds the className and not the needed css itself. Side note project was created with CRA and is SSR.