[Bug]: Setting color in color-area randomly changes the value

### Code of conduct

- [x] I agree to follow this project's code of conduct.

### Impacted component(s)

sp-color-area

### Library version

1.7.0

### Expected behavior

Setting the color value in sp-color-area rndomly selects another value.

### Actual behavior

This is replicable on the Stackblitz just by clicking around in the box. Oftentimes, when you release your mouse, the cursor will suddenly jump to the opposite side of the box, selecting a totally incorrect color. Sometimes the inner color value matches the intended selection, other times the inner color value matches where the cursor incorrectly lands.

### Screenshots


### What browsers are you seeing the problem in?

_No response_

### How can we reproduce this issue?

1. Go to '[here](https://stackblitz.com/edit/vitejs-vite-nqupkmym?file=package.json)'
2.Select a color by clicking on color-area and see the color resets to some random value.

### Sample code or abstract reproduction which illustrates the problem

_No response_

### Severity

SEV 3

### Logs taken while reproducing problem

_No response_

### Would you like to track this issue in Jira?

- [ ] Yes, please tell me the ticket number!