Colour selection is confusing in right-to left view

[umerfaruk]

Describe the bug
When control with website in right to left lanuages, its selection is not correctly shown on the color map. It appears as a elongated bar instead of a circle. Also the of color selector is inverted. In the attached screen shot you can see that the selection is for the dark green but it has chosen the light green color in the selection.

To Reproduce
Steps to reproduce the behavior:

1. Import and use the control in your website

<ColorPicker   id="secondaryColor"   disableAlpha   aria-describedby="secondaryColor"   name="secondaryColor"
 />

2. Click on the control to select color and it will select correct color according to your selection point on color gradient.
3. Make application dir to be rtl
4. Click on the control to select color on color gradient.
5. When color is selected in rtl mode it is not correct

Expected behavior
In the direction RTL the background color gradient should be inverted as well. Also the selection circle that appears on the color gradient is drawn as an elongated bar instead of circle.

Screenshots

In Left-to-right mode

In Right-to-Left mode

• OS: Windows 10
• Browser : Microsoft Edge
• Version : 91.0.864.41 (Official build) (64-bit)
• Browser : Firefox
• Version 89.0 (64-bit)