Redefining styles of react components using CSS Modules

Всем привет! Не удается переопределить стиль компонента. Использую стилизации с помощью CSS Modules. Внутри компонента заданы базовые стили. Компонент имеет свойство className, добавляющее класс компоненту.

Класс, передаваемый через пропсы не переопределяет базовый стиль, почему-то :(

Компонент

import React from 'react';
import styles from './Chip.module.scss';
import classNames from 'classnames';
import Icon from '../../Icon/Icon';

export interface IChipProps {
  className?: string;
  children?: React.ReactNode;
  title?: string;
}
export const Chip = (props: IChipProps) => {
  const cx = classNames.bind(styles);

  return (
    <div className={cx(styles.container, props?.className)}>
      <span>{props.title}</span>
      <Icon className={styles.icon} attrs={{ src: '/icons/transferHistory/close.svg' }} />
    </div>
  );
};

Добавление класса

<div className={styles.filterChips}>
        <Chip className={styles.filterChip} title="Feb 2020" />
        <Chip className={styles.filterChip} title="Min 2 Max 100 USD" />
        <Chip className={styles.filterChip} title="2 Addresses" />
        <Chip className={styles.filterChip} title="3 Accounts" />
        <Chip className={styles.filterChipClear} title="Clear all filter" />
      </div>

Результате в dev tools

Спасибо за внимание