Use imported styles inside classname's conditional expression

Question

I'm working on a NextJs project. I'm using Tailwind css , along with some custom css.

I'm having the following code.

grid-images.module.scss

@media (min-width: 768px) {
  .mt-md-6 {
    margin-top: 3rem !important;
  }
}

grid-images.tsx

import cn from 'classnames';
import s from './grid-images.module.scss';

export function GridImages() {
  const gridWrappper = cn(
    'xs:w-full',
    'p-0',
    'my-0',
    {
      'md:w-5/12': index === 0 || index === 3,
      'md:w-7/12': index === 1 || index === 2,
    },
    { s['mt-md-6']: index === 2 || index === 3 }
  );
  return (
    <div className={gridWrappper} key={index} data-testid="gridImageItem"></div>
  );
}

I'm using classnames for joining classNames together. I'm trying to use a custom class defined in ./grid-images.module.scss . I want it to apply only when the condition is true . On the line { s['mt-md-6']: index === 2 || index === 3 } at s[ I am getting an error ',' expected.ts(1005). I have also tried accessing the style using s.mt-md-6 but that doesn't work .

Please tell how could I access a custom css class inside a conditional expression in classnames.