diff --git a/webapp/channels/src/components/user_settings/display/manage_timezones/manage_timezones.tsx b/webapp/channels/src/components/user_settings/display/manage_timezones/manage_timezones.tsx
index 87efa51c68..6e7d3b87e3 100644
--- a/webapp/channels/src/components/user_settings/display/manage_timezones/manage_timezones.tsx
+++ b/webapp/channels/src/components/user_settings/display/manage_timezones/manage_timezones.tsx
@@ -156,25 +156,46 @@ export default class ManageTimezones extends React.PureComponent<Props, State> {
         });
     };
 
-    handleManualTimezone = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        this.setState({manualTimezone: e.target.value});
-    };
     render() {
         const {timezones} = this.props;
         const {useAutomaticTimezone} = this.state;
 
+        let index = 0;
+        let previousTimezone: Timezone;
+
         const timeOptions = this.props.timezones.map((timeObject) => {
+            if (timeObject.utc[index] === previousTimezone?.utc[index]) {
+                index++;
+            } else {
+                // It's safe to use the first item since consecutive timezones
+                // don't have the same 'utc' array.
+                index = index === 0 ? index : 0;
+            }
+
+            previousTimezone = timeObject;
+
+            // Some more context on why different 'utc' items are used can be found here.
+            // https://github.com/mattermost/mattermost/pull/29290#issuecomment-2478492626
             return {
-                value: timeObject.utc[0],
+                value: timeObject.utc[index],
                 label: timeObject.text,
             };
         });
+
         let serverError;
         if (this.state.serverError) {
             serverError = <label className='has-error'>{this.state.serverError}</label>;
         }
 
         const inputs = [];
+
+        // These are passed to the 'key' prop and should all be unique.
+        const inputId = {
+            automaticTimezoneInput: 1,
+            manualTimezoneInput: 2,
+            message: 3,
+        };
+
         const reactStyles = {
 
             menuPortal: (provided: React.CSSProperties) => ({
@@ -186,7 +207,10 @@ export default class ManageTimezones extends React.PureComponent<Props, State> {
 
         const noTimezonesFromServer = timezones.length === 0;
         const automaticTimezoneInput = (
-            <div className='checkbox'>
+            <div
+                className='checkbox'
+                key={inputId.automaticTimezoneInput}
+            >
                 <label>
                     <input
                         id='automaticTimezoneInput'
@@ -207,6 +231,7 @@ export default class ManageTimezones extends React.PureComponent<Props, State> {
         const manualTimezoneInput = (
             <div
                 className='pt-2'
+                key={inputId.manualTimezoneInput}
             >
                 <ReactSelect
                     className='react-select react-select-top'
@@ -230,7 +255,7 @@ export default class ManageTimezones extends React.PureComponent<Props, State> {
         inputs.push(manualTimezoneInput);
 
         inputs.push(
-            <div>
+            <div key={inputId.message}>
                 <br/>
                 <FormattedMessage
                     id='user.settings.timezones.promote'