I am trying to build searchlist for the searchbar and the list should be change color when cursor is placed their and got selected when clicked from list of item shown.

searchlist.jsx:

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

function SearchList({TitleArray,setSearchQuery}) {
  return (
   <>
    <div className="Container_SearchList">
    {
            TitleArray.map(m=>{
                return   <p
                key={m}
                onClick={e=>setSearchQuery(m)}
                className='titleItem'> 
               <FaSearch/>
            {m}
            </p>  
          })
      
        }   
    </div>
    </>
  )
}

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);
}

enter image description here

When cursor is placed on the name, the color should change and the name should get selected