diff --git a/app/assets/javascripts/releases/util.js b/app/assets/javascripts/releases/util.js
index ac88bd7e291..464f0594b8d 100644
--- a/app/assets/javascripts/releases/util.js
+++ b/app/assets/javascripts/releases/util.js
@@ -15,13 +15,17 @@ import {
 export const releaseToApiJson = (release, createFrom = null) => {
   const name = release.name?.trim().length > 0 ? release.name.trim() : null;
 
+  // Milestones may be either a list of milestone objects OR just a list
+  // of milestone titles. The API requires only the titles be sent.
+  const milestones = (release.milestones || []).map(m => m.title || m);
+
   return convertObjectPropsToSnakeCase(
     {
       name,
       tagName: release.tagName,
       ref: createFrom,
       description: release.description,
-      milestones: release.milestones,
+      milestones,
       assets: release.assets,
     },
     { deep: true },
diff --git a/changelogs/unreleased/nfriend-fix-milestone-array-payload.yml b/changelogs/unreleased/nfriend-fix-milestone-array-payload.yml
new file mode 100644
index 00000000000..20fff394ae5
--- /dev/null
+++ b/changelogs/unreleased/nfriend-fix-milestone-array-payload.yml
@@ -0,0 +1,5 @@
+---
+title: Fix error when updating releases with milestone associations through the UI
+merge_request: 47222
+author:
+type: fixed
diff --git a/doc/development/fe_guide/style/scss.md b/doc/development/fe_guide/style/scss.md
index 0b5c4a2142b..c6ee1e64a80 100644
--- a/doc/development/fe_guide/style/scss.md
+++ b/doc/development/fe_guide/style/scss.md
@@ -49,11 +49,6 @@ We recommend a "utility-first" approach.
 
 This encourages an organic growth of component classes and prevents the creation of one-off unreusable classes. Also, the kind of classes that emerge from "utility-first" tend to be design-centered (e.g. `.button`, `.alert`, `.card`) rather than domain-centered (e.g. `.security-report-widget`, `.commit-header-icon`).
 
-Examples of component classes that were created using "utility-first" include:
-
-- [`.circle-icon-container`](https://gitlab.com/gitlab-org/gitlab/blob/579fa8b8ec7eb38d40c96521f517c9dab8c3b97a/app/assets/stylesheets/framework/icons.scss#L85)
-- [`.d-flex-center`](https://gitlab.com/gitlab-org/gitlab/blob/900083d89cd6af391d26ab7922b3f64fa2839bef/app/assets/stylesheets/framework/common.scss#L425)
-
 Inspiration:
 
 - <https://tailwindcss.com/docs/utility-first>
diff --git a/spec/features/projects/releases/user_views_edit_release_spec.rb b/spec/features/projects/releases/user_views_edit_release_spec.rb
index 9115a135aeb..bb54b6be9c4 100644
--- a/spec/features/projects/releases/user_views_edit_release_spec.rb
+++ b/spec/features/projects/releases/user_views_edit_release_spec.rb
@@ -4,7 +4,7 @@ require 'spec_helper'
 
 RSpec.describe 'User edits Release', :js do
   let_it_be(:project) { create(:project, :repository) }
-  let_it_be(:release) { create(:release, project: project, name: 'The first release' ) }
+  let_it_be(:release) { create(:release, :with_milestones, milestones_count: 1, project: project, name: 'The first release' ) }
   let_it_be(:user) { create(:user) }
 
   before do
diff --git a/spec/frontend/releases/util_spec.js b/spec/frontend/releases/util_spec.js
index 549cb7b98d9..fd00a524628 100644
--- a/spec/frontend/releases/util_spec.js
+++ b/spec/frontend/releases/util_spec.js
@@ -73,6 +73,18 @@ describe('releases/util.js', () => {
         expect(releaseToApiJson(release)).toMatchObject(expectedJson);
       });
     });
+
+    describe('when milestones contains full milestone objects', () => {
+      it('converts the milestone objects into titles', () => {
+        const release = {
+          milestones: [{ title: '13.2' }, { title: '13.3' }, '13.4'],
+        };
+
+        const expectedJson = { milestones: ['13.2', '13.3', '13.4'] };
+
+        expect(releaseToApiJson(release)).toMatchObject(expectedJson);
+      });
+    });
   });
 
   describe('apiJsonToRelease', () => {