track boolean state of each element in array and change styles if active react

I am trying to change the active style of an element in an array. As shown in the image below - when you press on the day the styles will change to add a border around it.

So far I am struggling to change the boolean state of each element individually and track when I press on another date it will change the active state to false. Here is my code so far:

function Journal() {const day = new Date().getDay();const month = new Date().getMonth();const dayNumber = new Date().getDate();const [active, setActive] = useState(false);let [fontsLoaded] = useFonts({    Roboto_400Regular});if (!fontsLoaded) {    return <></>;} else {    return (<ScrollView><CheckInHeader/><View style={{margin: 32}}><Text style={{fontSize: 18, fontFamily: 'Roboto_400Regular'}}>Today</Text><View style={{flexDirection: 'row'}}><Text                        style={{                            fontSize: 14,                            fontFamily: 'Roboto_400Regular',                            color: '#878787'                        }}>{getDay(day)} </Text><Text style={{                        fontSize: 14,                        fontFamily: 'Roboto_400Regular',                        color: '#878787'                    }}>{getDayNumber(dayNumber)} </Text><Text style={{                        fontSize: 14,                        fontFamily: 'Roboto_400Regular',                        color: '#878787'                    }}>{getMonth(month)}</Text></View><JournalEntry/><View style={{flexDirection: 'row-reverse', justifyContent: 'space-around', marginTop: 64}}>                    {lastSevenDays().map((result, i) => {                        return (<TouchableOpacity                                style={[lastSevenDays()[i].active ? {                                    alignItems: 'center',                                    borderColor: '#DBDBDB',                                    borderWidth: 1,                                    borderRadius: 16,                                    minWidth: 48,                                    padding: 8                                } : {alignItems: 'center'}]}                                onPress={() => {                                    lastSevenDays()[i].active                                }}><Text>{result.day?.slice(0, 3)}</Text><Text>{result.dayNumber}</Text></TouchableOpacity>                        )                    })}</View></View></ScrollView>    );}

}

export const lastSevenDays = (): {day: string | undefined, dayNumber: number, month: string | undefined, active: boolean}[] => {let result = [];for (let i=0; i<7; i++) {    let d = new Date();    d.setDate(d.getDate() - i);    result.push({day: getDay(d.getDay()), dayNumber: d.getDate(), month: getMonth(d.getMonth()), active: false})}return (result);

}

Any help on how to do this would be brilliant! Thanks :)