how to use useState instead of .push Array?

Hello I am trying to push a mock data to a store data. I understand from the .push function it doesn't work globally where as using a useState it can update state of the array. I couldn't figure out for the life of me on how to properly implement it, as the .push() works locally but it does not updates when the a button is pressed. The useState would need to accept of those 5 properties because of Reservation[] (you can see those properties in .push()) and I couldn't figure out on how to implement it without getting errors. Here's the code.

interface TripProps {  onPress: () => void;  data: Reservation[] | undefined;}const Trip: React.FC<TripProps> = ({  onPress,  data,}) => {  console.log('before data is pushed '+ JSON.stringify(data));  const [updateData, setUpdateData] = useState(data);  const LoadConfirmInfo = () => {    setUpdateData([      {        ...updateData,        confirmNumber: verification.confirmNumber,        startDate: new Date(verification.startDate),        endDate: new Date(verification.endDate),        hotel: verification.hotel,        status: ReservationStatusType.Upcoming,      },    ]);    console.log('checking if info is pushed '+ JSON.stringify(updateData));  };return (<View><BackBaseModal        isVisible={isVisible}        onPress={() => {          onPress();          LoadConfirmInfo();        }}></BackBaseModal></View>

I had just recently updated the changes to the useState, but I am still unable to add data into the array, and the data is not updated. Am I missing something?