Эффект наведения не применяется в CSS. В чем именно проблема? ⇐ CSS

[Anonymous]

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

Код: Выделить всё

searchlist.jsx:
import React from 'react'
import { FaSearch } from 'react-icons/fa';
import './SearchList.css';

function SearchList({TitleArray,setSearchQuery}) {
return (


{
TitleArray.map(m=>{
return   
                key={m}
onClick={e=>setSearchQuery(m)}
className='titleItem'>

{m}

})

}


)
}

export default SearchList;

Код: Выделить всё

searchlist.css:
.Container_SearchList {
background-color: white;
width: 90.75%;
position: absolute;
top:2.7rem;
height: fit-content;
z-index: 91;
}

.titleItem {
margin: 0;
padding: 0.5rem;
cursor: pointer;
}

.titleItem div p:hover {
background-color: rgba(166,202,234,0.516);
}

введите здесь описание изображения
Когда курсор наведен на имя, цвет должен измениться, и имя должно быть выбрано

Подробнее здесь: https://stackoverflow.com/questions/784 ... ct-problem