diff --git a/app/components/procedure/chorus_form_component.rb b/app/components/procedure/chorus_form_component.rb
index 0602a9ccd..19298b775 100644
--- a/app/components/procedure/chorus_form_component.rb
+++ b/app/components/procedure/chorus_form_component.rb
@@ -14,6 +14,20 @@ class Procedure::ChorusFormComponent < ApplicationComponent
     }
   end
 
+  def selected_key(attribute_name)
+    items(attribute_name).first&.dig(:value)
+  end
+
+  def items(attribute_name)
+    label = format_displayed_value(attribute_name)
+    data = format_hidden_value(attribute_name)
+    if label.present?
+      [{ label:, value: label, data: }]
+    else
+      []
+    end
+  end
+
   def format_displayed_value(attribute_name)
     case attribute_name
     when :centre_de_cout
@@ -30,13 +44,23 @@ class Procedure::ChorusFormComponent < ApplicationComponent
   def format_hidden_value(attribute_name)
     case attribute_name
     when :centre_de_cout
-      @chorus_configuration.centre_de_cout.to_json
+      @chorus_configuration.centre_de_cout
     when :domaine_fonctionnel
-      @chorus_configuration.domaine_fonctionnel.to_json
+      @chorus_configuration.domaine_fonctionnel
     when :referentiel_de_programmation
-      @chorus_configuration.referentiel_de_programmation.to_json
+      @chorus_configuration.referentiel_de_programmation
     else
       raise 'unknown attribute_name'
     end
   end
+
+  def react_props(name, chorus_configuration_attribute, datasource_endpoint)
+    {
+      name:,
+      selected_key: selected_key(chorus_configuration_attribute),
+      items: items(chorus_configuration_attribute),
+      loader: datasource_endpoint,
+      id: chorus_configuration_attribute
+    }
+  end
 end
diff --git a/app/components/procedure/chorus_form_component/chorus_form_component.html.haml b/app/components/procedure/chorus_form_component/chorus_form_component.html.haml
index 3fe78a9d3..df2a7131e 100644
--- a/app/components/procedure/chorus_form_component/chorus_form_component.html.haml
+++ b/app/components/procedure/chorus_form_component/chorus_form_component.html.haml
@@ -1,12 +1,10 @@
-= form_for([procedure, @chorus_configuration],url: admin_procedure_chorus_path(procedure), method: :put) do |f|
+= form_for([procedure, @chorus_configuration], url: admin_procedure_chorus_path(procedure), method: :put) do |f|
   - map_attribute_to_autocomplete_endpoint.map do |chorus_configuration_attribute, datasource_endpoint|
     -  label_id = "#{chorus_configuration_attribute}-label"
     .fr-select-group
-      = f.label chorus_configuration_attribute, class: 'fr-label', id: label_id
-      = render Dsfr::ComboboxComponent.new form: f,
-         url: datasource_endpoint,
-         selected: format_displayed_value(chorus_configuration_attribute),
-         input_html_options: { id: chorus_configuration_attribute, class: 'fr-select', describedby: label_id, name: :chorus_configuration_attribute } do
-        = f.hidden_field chorus_configuration_attribute, data: { value_slot: 'data' }, value: format_hidden_value(chorus_configuration_attribute)
+      = f.label chorus_configuration_attribute, class: 'fr-label', id: label_id, for: chorus_configuration_attribute
+      %react-fragment
+        = render ReactComponent.new "ComboBox/RemoteComboBox", **react_props(f.field_name(:chorus_configuration_attribute), chorus_configuration_attribute, datasource_endpoint) do
+          = render ReactComponent.new "ComboBox/ComboBoxValueSlot", field: :data, name: f.field_name(chorus_configuration_attribute)
 
   = f.submit "Enregister", class: 'fr-btn'