How to properly pass imported css styles via props to Next.js?

Question

css

There is a root file in the dynamic folder [step] pages of the directory and many page files that are similar in css style to each other (Start,Final, WizardStep1...n).

list of files

├───pages
   └───[step]
       hire_expert.module.css
       Final.js
       index.js
       Start.js
       WizardStep1.js
       WizardStep2.js
       ...

I wanted to save on the volume of style files and made the following stylesheet in the index.js file:

index.js

import cn from 'classnames';
import styles from './hire_expert.module.css';
/*
сдесть обработка роутов в getStaticProps и getStaticPaths
и к данному вопросу не относится
*/
function ApplyExpertStart({ step, meta: metaDada }) {
  return (
      <div
        className={cn(styles.wizard_content, {
          [styles.start]: step === 'start',
          [styles.wizard_step]: step !== 'start' && step !== 'final',
          [styles.finish]: step === 'final',
        })}
      >
        <div className={styles.content_inner}>
          {step === 'start' && <Start styles={styles} />}
          {step === 'final' && <Final styles={styles} />}
          {step === 'wizardStep1' && <WizardStep1 styles={styles} />}
          {step === 'wizardStep2' && <WizardStep2 styles={styles} />}
          ...
        </div>
      </div>
  );
}

In the files to which I transfer, I use styles like this:

Start.js

import Link from 'next/link';
import { ButtonLink } from '@dev/components';

function HireExpertStart({ styles }) {
  return (
    <>
      <div className={styles.heading}>
        <span className={styles.small_logo} />
        <p>
          Thanks for your interest in hiring through
          <span className={styles.dark}>
            {' '}
            our company</span>
          </span>
          ! Before we get started, we’d like to ask a few questions to better
          understand your business needs.
        </p>
      </div>
      <div className={styles.btns_wrapper}>
        <a href="#" className={styles.question}>
          Looking for freelance work?
        </a>
        <Link
          href={{
            pathname: '/[step]',
            query: { step: 'wizardStep1' },
          }}
          passHref
        >
          <ButtonLink appearance={'hire'} arrowButtonStep={'next'}>
            Start
          </ButtonLink>
        </Link>
      </div>
    </>
  );
}

While I was working in develop mode, everything was fine and everything worked, but when I decided to do a build, I got an error on all the pages where I passed styles (for each page it gives an error on its styles):

error

Error occurred prerendering page "/hire-expert/[step]/Start". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read property 'heading' of undefined
    at HireExpertStart (C:\Users\Infin\Documents\webproject\2am-tech\dist\apps\dev\.next\server\chunks\832.js:25:25)
    at d (C:\Users\Infin\Documents\webproject\2am-tech\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:33:498)
    at bb (C:\Users\Infin\Documents\webproject\2am-tech\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:36:16)
    at a.b.render (C:\Users\Infin\Documents\webproject\2am-tech\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:42:43)
    at a.b.read (C:\Users\Infin\Documents\webproject\2am-tech\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:41:83)
    at exports.renderToString (C:\Users\Infin\Documents\webproject\2am-tech\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:52:138)
    at Object.renderPage (C:\Users\Infin\Documents\webproject\2am-tech\node_modules\next\dist\next-server\server\render.js:53:854)
    at Function.getInitialProps (C:\Users\Infin\Documents\webproject\2am-tech\dist\apps\dev\.next\server\chunks\331.js:538:19)
    at Function.getInitialProps (C:\Users\Infin\Documents\webproject\2am-tech\dist\apps\dev\.next\server\pages\_document.js:71:83)
    at loadGetInitialProps (C:\Users\Infin\Documents\webproject\2am-tech\node_modules\next\dist\next-server\lib\utils.js:5:101)

I tried to delete className in tags in turn, so it gave an error for the next applied class with the next selector. Maybe this is generally a dead end option, or can it be overcome somehow?