I’m new to react, and I hope it’s something very obvious, but still, why don’t styles apply to elements via classes and IDs? Here’s my component

import './Header.module.css'

function Header() {
    let routes = [
        {
            name: "Home",
            href: "#"
        },
        {
            name: "About",
            href: "#"
        },
        {
            name: "Contacts",
            href: "#"
        }
    ]
    let links = routes.map(route => <li><a href={route.href}>{route.name}</a></li>)

    return (
        <>
            <header>

            </header>
            <nav>
                <a className="bars" href="#"><i class="fa-solid fa-bars"></i></a>
                <ul>
                    {links}
                    <li className="search-bar">
                        <input autocomplete="false" type="text" placeholder="Search"/>
                        <button><i className="fa-solid fa-magnifying-glass"></i></button>
                    </li>
                </ul>
            </nav>
        </>
    )
}

export default Header

I also tried applying styles via objects in JS and style={style} and it worked.