Наведение применяется ко всем элементам при наведении на один? Попутный ветер

Я не уверен, почему наведение применяется ко всем элементам при наведении на один элемент.

 {isClicked && ( 
            <div className='bg-slate-400 text-white p-6 absolute before: top-7 before: -left-7 flex flex-col gap-2 justify-center'>
                {countries.map((country, index) => (
                        <p 
                            key = {index}
                            className='hover:scale-110 hover:underline'
                        >
                            {country}
                        </p>
                ))}
            </div>)}

Итак, я изменил стиль при наведении:

  <div className='bg-slate-400 text-white p-6 absolute before: top-7 before: -left-7 flex flex-col gap-2 justify-center'>
                <h3>All UK</h3>
                {countries.map((country, index) => (
                        <p 
                            key = {index}
                            className='hover: bg-slate-800'
                        >
                            {country}
                        </p>
                ))}
            </div>)}

И теперь наведение применяется ко всем элементам p, даже если я не наводил на них курсор.

Почему происходит? Что изменить, чтобы наведение применялось только к одному элементу, на который наведен курсор?

И если название страны содержит 2 слова, второе слово переносится на новую строку. Я продолжал менять ширину и высоту, но все еще происходит. Я видел в документе попутного ветра использование пробела-nowrap, но он влияет на все элементы и отображается в строке, а не в столбце, все направления гибкости теста в столбце.

Весь компонент:

import React, { useState } from 'react'

const countries = ['England, Scotland, Wales, NorthemIreland']

const Location = () => {
    const [loc, setLoc] = useState({country: '', region: ''})
    const [isClicked, setIsClicked] = useState('false')

    return (
        <div 
            className='text-white relative'
            onClick = {() => setIsClicked(!isClicked)}
            >
         Location
         {isClicked && ( 
            <div className='bg-slate-400 text-white p-6 absolute before: top-7 before: -left-7 flex flex-col gap-2 justify-center'>
                <h3>All UK</h3>
                {countries.map((country, index) => (
                        <p 
                            key = {index}
                            className='hover: bg-slate-800'
                        >
                            {country}
                        </p>
                ))}
            </div>)}
        
        </div>
    )
}

export default Location