Как правильно передать импортированные стили css через props в Next.js?

Question

[Алексей]

Есть корневой файл в динамической папке [step] pages каталога и много файлов страниц, которые по стилям css похожи друг на друга (Start,Final, WizardStep1...n).

список файлов

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

Я хотел сэкономить на объеме файлов стилей и сделал в index.js файле следующую схему применения стилей:

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>
  );
}

В файлах, в которые передаю, использую стили так:

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>
    </>
  );
}

Пока работал в develop режиме все было хорошо и все работало, но когда я решил сделать build, то на все страницы, куда я передал 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)

Пробовал по очереди удалять className в тегах, так выдавало ошибку на следующий примененный класc c очередным селектором. Может это вообще тупиковый вариант, или как-то можно побороть?