values-use-value-exclusively.diff

diff --git a/assets/controllers/color-square_controller.js b/assets/controllers/color-square_controller.js
index 3f8d698..19b3e0a 100644
--- a/assets/controllers/color-square_controller.js
+++ b/assets/controllers/color-square_controller.js
@@ -1,8 +1,6 @@
 import { Controller } from 'stimulus';
 
 export default class extends Controller {
-    selectedColorId = null;
-
     static targets = ['colorSquare', 'select']
     static values = {
         colorId: Number
@@ -13,7 +11,7 @@ export default class extends Controller {
     }
 
     selectColor(event) {
-        this.setSelectedColor(event.currentTarget.dataset.colorId)
+        this.colorIdValue = event.currentTarget.dataset.colorId;
     }
 
     colorIdValueChanged() {
@@ -27,31 +25,4 @@ export default class extends Controller {
             }
         });
     }
-
-    setSelectedColor(clickedColorId) {
-        if (clickedColorId === this.selectedColorId) {
-            this.findSelectedColorSquare().classList.remove('selected');
-
-            this.selectedColorId = null;
-            this.selectTarget.value = '';
-
-            return;
-        }
-
-        this.selectedColorId = clickedColorId;
-
-        this.colorSquareTargets.forEach((element) => {
-            element.classList.remove('selected');
-        });
-
-        this.findSelectedColorSquare().classList.add('selected');
-        this.selectTarget.value = this.selectedColorId;
-    }
-
-    /**
-     * @return {Element|null}
-     */
-    findSelectedColorSquare() {
-        return this.colorSquareTargets.find((element) => element.dataset.colorId == this.selectedColorId);
-    }
 }