I've developed a project and in that i've implemented a HOC which is basically a container wrapper with some default module css and accepts module css as props, the issue is that sometimes (on local, but can be sometimes seen on prod), on navigating, the overriding styles which are passed to this HOC are being ignored and hence HOC's styles are being applied even though i passed custom styles as props. what could cause this issue and how do i solve it as i've used this HOC in almost every section component :- (I also tried to use clsx library to better manage combining styles but seems like it didn't solve the issue)

import clsx from "clsx";
const SectionWrapper = ({
  sectionId,
  children,
  wrapperStyles //string,
  conStyles //string,
}) => {
  return (
    <section
      id={sectionId}
      className={clsx(styles.sectionWrapper, wrapperStyles)}
    >
      <div className={clsx(styles.sectionCon, conStyles)}>{children}</div>
    </section>
  );
};
//styles
.sectionWrapper {
  padding-block: 20px;
}
.sectionCon {
  display: flex;
  flex-direction: column;
  padding-inline: var(--padding);
}
@media screen and (min-width: 1024px) {
  .sectionWrapper {
    padding-block: 40px;
  }
  .sectionCon {
    margin-inline: auto;
    max-width: var(--max-width);
    padding-inline: var(--padding);
  }
}

Now let's say in any component :-

const HeroSection = ({ data }) => {
  return (
    <SectionWrapper
      sectionId="hero"
      conStyles={styles.heroCon}
      wrapperStyles={styles.heroWrapper}
    >
      //jsx...
    </SectionWrapper>
  );
};
//styles :-
.heroWrapper,
.heroCon {
  padding: 0; // doesn't get applied when sometimes navigating back & forth
  background: var(--background-hover);
}
.heroWrapper {
  padding-bottom: 20px;
}
@media screen and (min-width: 1024px) {
.heroWrapper {
  padding-block: 40px;
}
.heroCon {
  padding-inline: var(--padding);
}

can someone help?