change size of buttons dynamically in react native

Question

enter image description here i made these buttons and want : when i click on one of them its size will increase but after clicking on another button, the precedent one pressed will return to its original size

here is my code:the size of the pressed date increase but if another button is pressed the precedent do not return to its original size

the parent component:

//array containing the days and dates of the week
const dates: DateItem[] = [];
//today's date
const currentDate = dayjs();
for (let i = 0; i < 7; i++) {
  //getting the 7 dates from today
  const nextDate = currentDate.add(i, "day");
  const formattedDate = nextDate.format("DD");
  //getting the 7 days from today
  const currentDay = currentDate.add(i, "day").format("ddd");
  //adding the results to the dates table
  dates.push({
    jour: currentDay,
    date: formattedDate,
  });
}
export default function Accueil() {

  return (
{dates.map((d, index) => {
                  return (
                    <DateCards
                      jour={d.jour}
                      date={d.date}
                      onPressCallback={() => handleDatePress(date)}
                    />
                  );
                })})

}

**
the child component:**

import React from "react";
import { useState } from "react";
import { Text, StyleSheet, Pressable } from "react-native";



export default function DateCards({ jour, date, onPressCallback }) {

  const [press, setPress] = useState(false);
  return (
    <Pressable
      onPress={() => {
        onPressCallback( date), setPress(true);
      }}
      style={() => [
        [
          styles.dateContainer,
          press && styles.pressed,
        ],
      ]}
    >
      <Text style={[styles.jour, press && styles.pressedText]}>{jour}</Text>
      <Text style={[styles.date, press && styles.pressedText]}>{date}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({,
  pressed: {
    // opacity: 0.7,
    width: 60,
    height: 60,
    backgroundColor: "#fff",
  },
  dateContainer: {
    width: 50,
    height: 50,
    borderRadius: 12,
    backgroundColor: "#fff",
    justifyContent: "center",
    alignItems: "center",
    marginVertical: 5,
  },
  jour: {
    color: "#455154",
    fontSize: 14,
    fontWeight: "400",
  },
  date: {
    color: "#455154",
    fontSize: 16,
    fontWeight: "600",
  },
  pressedText: {
    fontSize: 18,
    fontWeight: "600",
  },
});