What happened to the form element?

Question

Sass

I'm making a card. Here is the component

import React from "react";
import styles from "./searchCard.module.scss";
import Textfield from "../../Textfield/Textfield";
import SubmitButton from "../../Button/Submit/SubmitButton";
const SearchCard = () => {
  return (
    <div className={styles.card__wrapper}>
      <h1 className={styles.card__title}>Найдём номера под ваши пожелания</h1>
      <form сlassName={styles.card__form}>
        <Textfield role='dropdown' size='sm' placeholder='ДД.ММ.ГГГГ' />
        <Textfield role='dropdown' size='sm' placeholder='ДД.ММ.ГГГГ' />
        <Textfield role='dropdown' size='lg' placeholder='Сколько гостей' />
        <SubmitButton
          size='Xlarge'
          selector='contained'
          text='Подобрать номер'
        />
      </form>
    </div>
  );
};

export default SearchCard;

As a result, I see that the styles were not applied to the FORM element, they are applied to all the rest.
Here is what I see in ChromeDevtools

Question? Why is there classname when all other elements have normal classes?