Styles don't work when using .module.css in React

Question

I have a problem with modules in React! I have translated all css files into .module, as is often advised to do in React. But when translating a single file, styles do not work, although if you translate to the original css, then everything is normalized. Tell me, what could be the problem?

The js file where I import css

import React from 'react';
import style from './postListItem.module.css';

const PostListItem = (data) => {
const { label, onDelete, onToggleImp, onToggleLike, important, like } =
    data;

let classNames = `${style.appListItem} d-flex justify-content-between`;

if (like) {
    classNames += ' like';
}

if (important) {
    classNames += ' important';
}

return (
    <div className={classNames}>
        <span onClick={onToggleLike} className= {style.appListItemLabel}>
            {label}
        </span>
        <div className="d-flex justify-content-center align-items-center">
            <button
                type="button"
                className="btn-star btn-sm"
                onClick={onToggleImp}
            >
                <i className="fa fa-star"></i>
            </button>

            <button
                type="button"
                className="btn-trash btn-sm"
                onClick={onDelete}
            >
                🗑
                <i className="fa fa-trash-o"></i>
            </button>
            <i className="fa fa-heart"></i>
        </div>
    </div>
);
};
export default PostListItem;

new css file

.appListItem {
 font-size: 1.25rem;
 }

 .appListItem button {
 width: 35px;
height: 35px;
margin: 3px;
font-size: 17px;
border: none;
cursor: pointer;
}
.appListItem button:focus {
box-shadow: none;
outline: none;
}
.appListItem .btn-star {
 color: #ffd700;
}
.appListItem .btn-trash {
color: red;
 }
.appListItem .fa-heart {
width: 35px;
height: 35px;
text-align: center;
line-height: 35px;
font-size: 16px;
color: red;
transition: 0.3s all;
transform: translateX(30px);
opacity: 0;
}

.appListItemLabel {
display: block;
line-height: 35px;
cursor: pointer;
transition: 0.5s all;
}

.appListItem.like .fa-heart {
opacity: 1;
transform: translateX(0px);
}

.appListItem.important .appListItemLabel {
color: #ffd700;
}

.appListItem.important .btn-star {
color: #aeaeae;
}

old css file

.app-list-item {
font-size: 1.25rem;
}

.app-list-item button {
width: 35px;
height: 35px;
margin: 3px;
font-size: 17px;
border: none;
cursor: pointer;
 }
.app-list-item button:focus {
box-shadow: none;
outline: none;
 }
.app-list-item .btn-star {
color: #ffd700;
}
.app-list-item .btn-trash {
color: red;
}
.app-list-item .fa-heart {
width: 35px;
height: 35px;
text-align: center;
line-height: 35px;
font-size: 16px;
color: red;
transition: 0.3s all;
transform: translateX(30px);
opacity: 0;
 }

.app-list-item-label {
display: block;
line-height: 35px;
cursor: pointer;
/*
ms-user-select: none;
*/
transition: 0.5s all;
}

.app-list-item.like .fa-heart {
opacity: 1;
transform: translateX(0px);
}

.app-list-item.important .app-list-item-label {
color: #ffd700;
}

.app-list-item.important .btn-star {
color: #aeaeae;
}

I searched, I looked, I didn't find anything that can help me. Maybe I don't really mean simple

Thank you all in advance for your response!