Class name composition with CssModules

Question

i have some react components that compose css classes, using css modules, as shown in the following example:

import React from "react";
import style from "./button.module.css";

class Button extends React.Component {
  constructor(props) {
  super(props);
}

render() {
  let cssClass = style.field;

  if (this.props.cssClass) {
    cssClass += Array.isArray(this.props.cssClass)
      ? this.props.cssClass.map((item) => " " + style[item])
      : " " + style[this.props.cssClass];
  }

  if (this.props.customCssClass) {
    cssClass += " " + this.props.customCssClass;
  }

  return (
    <button
      className={cssClass}
    >
      {this.props.text}
    </button>
  );
 }
}

export default Button;

In cssClass you provide a class or an array of classes defined in the child component.

In customCssClass you provide class(es) defined in the parent component or class(es) defined globally.

This is working well. But...

My goal is to create an helper function to compose classNames avoiding copy and paste this block of code inside each component

  let cssClass = style.field;

  if (this.props.cssClass) {
    cssClass += Array.isArray(this.props.cssClass)
      ? this.props.cssClass.map((item) => " " + style[item])
      : " " + style[this.props.cssClass];
  }

  if (this.props.customCssClass) {
    cssClass += " " + this.props.customCssClass;
  }

This is what i tried so far:

//utils.js
export const composeClass = (style, componentClass, customCssClass) => {

  let cssClass = style;

  if (componentClass) {
    cssClass += Array.isArray(componentClass)
      ? componentClass.map((item) => " " + style[item])
      : " " + style[componentClass];
  }

  if (customCssClass) {
    cssClass += " " + customCssClass;
  }

  return cssClass;
};

And the above Button component should became:

import React from "react";
import style from "./button.module.css";
import composeClass from "./utils.js"

class Button extends React.Component {
  constructor(props) {
  super(props);
}

render() {
  let cssClass = composeClass(style.field, this.props.cssClass, this.props.customCssClass);

  return (
    <button
      className={cssClass}
    >
      {this.props.text}
    </button>
  );
 }
}

export default Button;

But i can't get it work: it seems that i can't access e.g. style[item] from another file

Is there a way to solve this? Or i have to copy and paste that code inside every components?