diff --git a/ui/react-components/components/AddAppointment/AddAppointment.jsx b/ui/react-components/components/AddAppointment/AddAppointment.jsx
index 0c67dfff2..32bfa6828 100644
--- a/ui/react-components/components/AddAppointment/AddAppointment.jsx
+++ b/ui/react-components/components/AddAppointment/AddAppointment.jsx
@@ -816,7 +816,8 @@ const AddAppointment = props => {
                                 isRequired={requiredFields.appointmentStartDate}
                                 showWarning={showHolidayWarning}
                                 intl={intl}
-                                title={<FormattedMessage id="APPOINTMENT_DATE_LABEL" defaultMessage="Appointment date"/>}/>
+                                title={intl.formatMessage({id: 'APPOINTMENT_DATE_LABEL', defaultMessage: "Appointment date"})}
+                            />
                             <ErrorMessage message={errors.appointmentDateError ? errorTranslations.dateErrorMessage : undefined}/>
                         </div>
                         <div style={{display: "flex"}}>
diff --git a/ui/react-components/components/EditAppointment/EditAppointment.jsx b/ui/react-components/components/EditAppointment/EditAppointment.jsx
index 2be2d99f3..b88d715b6 100644
--- a/ui/react-components/components/EditAppointment/EditAppointment.jsx
+++ b/ui/react-components/components/EditAppointment/EditAppointment.jsx
@@ -687,7 +687,7 @@ const EditAppointment = props => {
                             isRequired={requiredFields.appointmentStartDate}
                             showWarning={showHolidayWarning}
                             intl={intl}
-                            title={"Appointment date"}/>
+                            title={intl.formatMessage({id: 'APPOINTMENT_DATE_LABEL', defaultMessage: "Appointment date"})}/>
                         <ErrorMessage message={errors.appointmentDateError ? errorTranslations.dateErrorMessage : undefined}/>
                     </div>
                     <div style={{display: "flex"}}>