dataset-set-selected-option.diff

diff --git a/assets/controllers/color-square_controller.js b/assets/controllers/color-square_controller.js
index 250485d..f121846 100644
--- a/assets/controllers/color-square_controller.js
+++ b/assets/controllers/color-square_controller.js
@@ -1,7 +1,7 @@
 import { Controller } from 'stimulus';
 
 export default class extends Controller {
-    static targets = ['colorSquare']
+    static targets = ['colorSquare', 'select']
 
     selectColor(event) {
         this.colorSquareTargets.forEach((element) => {
@@ -9,6 +9,6 @@ export default class extends Controller {
         });
 
         event.currentTarget.classList.add('selected');
-        console.log(event.currentTarget.dataset.colorId);
+        this.selectTarget.value = event.currentTarget.dataset.colorId;
     }
 }
diff --git a/templates/product/_cart_add_controls.html.twig b/templates/product/_cart_add_controls.html.twig
index 7637f22..6224146 100644
--- a/templates/product/_cart_add_controls.html.twig
+++ b/templates/product/_cart_add_controls.html.twig
@@ -3,7 +3,9 @@
 }) }}
     {% if addToCartForm.color is defined %}
         <div data-controller="color-square">
-            {{ form_widget(addToCartForm.color) }}
+            {{ form_widget(addToCartForm.color, {
+                attr: { 'data-color-square-target': 'select' }
+            }) }}
 
             {% for color in addToCartForm.vars.data.product.colors %}
                 <button