Я неправильно передаю эту опору?

Я создаю веб-сайт, используя CSS-реагирование и попутный ветер, я не знаю, почему кнопка наведения курсора не работает. Я добавил свои собственные цвета для всех реквизитов, но hoverColor все в порядке, а также я не знаю, почему у меня не работает значок реакции.

import React from "react";


function Button(props) {

    return (
        <button
            className = {`px-4 py-2 rounded w-max mx-2 ${props.bgColor} ${props.textColor} hover:${props.hoverColor}`}>
            {props.text}
        </button>

    );
}

export default Button;

import React from 'react';
import { IoPersonOutline } from "react-icons/io5";
import Button from './Button';




function Navbar() {

    return (
        <nav className = "flex items-center justify-between h-16 bg-white px-4 shadow-sm">

            <div className = "flex items-center my-2">


                <Button bgColor = "bg-red" text = "Post Ad"><span className = "flex items-center gap-2"><IoPersonOutline /></span>
                </Button>
                <Button hoverColor='bg-gray' textColor='text-dark-gray' text='Blue' />
                <Button hoverColor='bg-light-gray' textColor='text-dark-gray' text='Blue' />
                <Button hoverColor='bg-light-gray' textColor='text-dark-gray' text='Blue' />

            </div>
            <div className = "flex items-center my-2">

                <input type = "text" placeholder = "Searching in all..." className = "px-4 py-2 rounded-md bg-light-gray text-current" />
                <Button textColor = "text-dark-gray" text = "Search" />
                <Button textColor = "text-dark-gray" text = "Settings" />

                <div className = "sm:w-px h-8 mx-5 bg-gray"></div>
                <h1 className = " text-xl font-bold mr-2 text-red">Divar</h1>
            </div>
        </nav>
    );
}

export default Navbar;

Я сделал все, что знал, но ничего не изменилось. Пожалуйста, дайте мне знать, если вы можете определить, что я делаю неправильно.

🤔 А знаете ли вы, что...
React предоставляет жизненные циклы компонентов для управления состоянием и поведением.