function Price({ formValues, room, bookingDays }) {
  return (
    <div className={styles.priceWrapper}>
      <p>{Number(bookingDays)}</p>
      Price for {formValues.guests} {formValues.guests > 1 ? "guests" : "guest"}{" "}
      {formValues.children != 0 ? `and ${formValues.children} children` : ""}{" "}
      {bookingDays === 1 ? "for 1 day" : `for ${bookingDays} days`}
      <b className={styles.price}>
        {(
          room.price * formValues.guests +
          (room.price / 2) * formValues.children
        ) * bookingDays}
        $
      </b>
    </div>
  );
}

I have this React component that displays NaN for days and total price only on IOS

function Price({ formValues, room, bookingDays }) {
  return (
    <div className={styles.priceWrapper}>
   <p>{bookingDays}</p>
    </div>
  );
}

This shows NaN

function Price({ formValues, room, bookingDays }) {
  return (
    <div className={styles.priceWrapper}>
   <p>{typeof bookingDays}</p>
    </div>
  );
}

This shows numbers

I made sure that all are of number type and it shows the correct value on desktop and android but on IOS safari or chrome it shows NaN