Как сделать кнопку активной при нажатии в React, если отображаю их через map?

При нажатии, кнопка должна быть активной, при этом первая должна быть по умолчанию активной. Проблема в том, что делаю я через map().

import React, {useEffect, useState} from "react";
import Sunny from '../../assets/img/Sunny.png';
import Wind from '../../assets/img/wind.png';
import Rain from '../../assets/img/rain.png';
import Humidity from '../../assets/img/humidity.png';
import '../../assets/css/home/base.scss';
import {SimpleCell, ScreenSpinner, Text, Title, HorizontalScroll} from "@vkontakte/vkui";
import api from "../../modules/apiRequest";
import {useRecoilValue} from "recoil";
import {getIdCity} from "../../storage/selectors/idCity";
import Winter from "../../assets/img/Winter.png";


const Home = ({ }) => {

    const idCity = useRecoilValue(getIdCity);
    const [dataReq, setDataReq] = useState([]);
    const [spinner, setSpinner] = useState(<ScreenSpinner state="loading"/>)
    const [day, setDay] = useState(null);
    const [date, setDate] = useState(false);

    useEffect(() => {
        function timeConverter() {
            const a = new Date(day?.date * 1000);
            const months = ['Янв','Фев','Март','Апр','Май','Июнь','Июль','Авг','Сен','Окт','Нояб','Дек'];
            const month = months[a.getMonth()];
            const date = a.getDate();
            const time = date + ' ' + month;
            setDate(time);
        }
        timeConverter();
    }, [[], day])


    useEffect(() => {
        const fetchData = async() => {
            const req = await api(`current/${idCity?.id ? idCity?.id : 2}`,`GET`);
            setDataReq(req.data);
            setSpinner(null)
        }
        fetchData();
    }, [idCity])

  return (
    <>
        {spinner}
        <div className='wrapper'>
            <div className='MainSection'>
                <div className='up_info'>
                    <img width={200} src={Sunny} alt="Sunny"/>
                    <Title style={{ fontSize: 64 }}>{Math.round(day ? day.temperature?.celsius : dataReq.temperature?.celsius)}°</Title>
                </div>
                <div className='down_info'>
                    <Text style={{ textAlign: 'center', marginBottom: 2 }}>{day ? day?.condition : dataReq?.condition}</Text>
                </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
                <div className='additionalSection'>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <img width={20} src={Rain} alt="Rain"/>
                        <Text>6%</Text>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <img width={20} src={Humidity} alt="Wind"/>
                        <Text>{Math.round(day ? day?.humidity : dataReq?.humidity)}%</Text>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <img width={20} src={Wind} alt="Noun"/>
                        <Text>{Math.round(day ? day?.wind?.speed : dataReq?.wind?.speed)}</Text>
                    </div>
                </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
                <div className='weatherDays'>
                    <div className='title_days'>
                        <Text>{day ? date : 'Сегодня'}</Text>
                    </div>
                        <HorizontalScroll>
                            <div style={{ display: 'flex', gap: 5 }}>
                                <SimpleCell onClick={() => setDay(null)} className='button_days'>
                                    <img width={40} src={Sunny} alt="Sun"/>
                                    <Text>{dataReq.temperature?.celsius}</Text>
                                </SimpleCell>
                                {dataReq.days?.map(res =>
                                    <SimpleCell onClick={() => setDay(res)} key={Math.random()} className='button_days'>
                                        <img width={40} src={Sunny} alt="Sun"/>
                                        <Text>{Math.round(res.temperature.celsius)}</Text>
                                    </SimpleCell>
                                )}
                            </div>
                        </HorizontalScroll>
                </div>
            </div>
        </div>
    </>
  );
};

export default Home;