Prime Vue | Color Picker | When I connect the input with a label it double toggles the open

Hi all I am connecting the colorpicker input to a label via the inputId and when I want to toggle a open it works but when I want to click again to close it opens it again. See video.

Any ideas why this is happening?


<ColorPicker appendTo="self" inputId="123" />
                <label for="123" >
                    <svg v-if="showColorPicker" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-6 w-6 text-neutral-500">
                        <path fill-rule="evenodd" d="M9.47 6.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06L10 8.06l-3.72 3.72a.75.75 0 0 1-1.06-1.06l4.25-4.25Z" clip-rule="evenodd"></path>
                    </svg>
                    <svg v-else-if="!showColorPicker" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-6 w-6 text-neutral-500">
                        <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path>
                    </svg>
                </label>

enter image description here

I tried to connect the colorpicker id with a label tag to open and close the overlay. Did not work.