Перерисовка компонента при нажатии на элемент li

Подскажите, пожалуйста, как перерисовать имеющийся компонент на react jsx при нажатии на элемент li. Имеется компонент Content. Он отрисовывает список с карточками треков:

export default function Content() {
 // Содержимое компонента.

    function onClick(e) {
        e.preventDefault();
    }
    
    return (
                <main className="content">
                    <h2 className="title_content">Новые Релизы</h2>
                    <ul className="content-releases">
                        {items.map(
                            (item) => (
                                <li className="releases-container" key={item.id} onClick={onClick}>
                                    <img src={item.images[1].url} alt="releases_image" width="150" height="150" />
                                    <span className="name-track">{item.name}</span>
                                    <span className="name-artist">{item.artists[0].name}</span>
                                </li>
                            )
                        )}
                    </ul>
                </main>
            );

}

После нажатия на элемент li нужно, чтобы рендер выглядел так (изменены классы css, текст, разметка и т.д)

Как это реализовать? Пробовала просто в функцию onClick прописать нужный рендер, но не работает. Я только начинаю изучение React. Компоненты пишу не классами