diff --git a/packages/react-maplibre/src/ui_components/ColorPicker/ColorPicker.tsx b/packages/react-maplibre/src/ui_components/ColorPicker/ColorPicker.tsx
index dc23188c7..274a29380 100644
--- a/packages/react-maplibre/src/ui_components/ColorPicker/ColorPicker.tsx
+++ b/packages/react-maplibre/src/ui_components/ColorPicker/ColorPicker.tsx
@@ -10,7 +10,7 @@ export interface ColorPickerProps {
 	value?: string;
 }
 
-const ColorPicker = ({ convert, ...props }: ColorPickerProps) => {
+const ColorPicker = ({ convert = 'hex', ...props }: ColorPickerProps) => {
 	const [showPicker, setShowPicker] = useState(false);
 	const value = props?.value || '';