TypeError: Cannot read properties of null (reading 'getBoundingClientRect') when using Color` component

[Dragoy]

I'm encountering a TypeError: Cannot read properties of null (reading 'getBoundingClientRect') error when using the Color component in my React application. This error occurs specifically when I try to select a color using the color picker. The application crashes, and the error message points to the leva.js file.

Steps to Reproduce

1. Integrate leva into a React application.
2. Use the useControls hook to create a Color input.
3. Attempt to select a color using the color picker.

Expected Behavior

The color picker should allow me to select a color without any errors, and the selected color should be reflected in the application state.

Actual Behavior

The application crashes with the following error message:

Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
    at leva.js:11054:30
    at commitHookEffectListMount (chunk-QXLG2TGQ.js:16961:34)
    at commitLayoutEffectOnFiber (chunk-QXLG2TGQ.js:17048:23)
    at commitLayoutMountEffects_complete (chunk-QXLG2TGQ.js:18028:17)
    at commitLayoutEffects_begin (chunk-QXLG2TGQ.js:18017:15)
    at commitLayoutEffects (chunk-QXLG2TGQ.js:17968:11)
    at commitRootImpl (chunk-QXLG2TGQ.js:19404:13)
    at commitRoot (chunk-QXLG2TGQ.js:19328:13)
    at performSyncWorkOnRoot (chunk-QXLG2TGQ.js:18946:11)
    at flushSyncCallbacks (chunk-QXLG2TGQ.js:9164:30)

Minimal Reproducible Example

Here's a minimal reproducible example using CodeSandbox: [Link to your CodeSandbox example]

(If you don't have a CodeSandbox link, you can paste a minimal code example here, like the one I provided in the previous response)

import React, { useState } from 'react';
import { useControls, Leva } from 'leva';

function App() {
  const [color, setColor] = useState('#ff0000');

  const { targetColor } = useControls({
    targetColor: { value: color },
  });

  return (
    <div>
      <Leva />
      <p>Selected color: {targetColor}</p>
    </div>
  );
}

export default App;

Environment

• leva version: [Your leva version, e.g., 0.9.35]
• react version: [Your React version, e.g., 18.3.1]
• react-dom version: [Your ReactDOM version, e.g., 18.3.1]
• browser: [Your browser and version, e.g., Chrome 114]
• OS: [Your operating system, e.g., macOS Ventura]

Additional Context

• The error only occurs when selecting a color. Other leva components seem to work fine.
• I've tried delaying the initialization of LevaPanel, but the error still persists.
• I've also tried using a Number input as a workaround, which works, but I'd prefer to use the Color component.
• [Any other relevant information, like if you're using TypeScript, specific configurations, etc.]

Workaround (Optional)

Currently, I'm using a Number input to handle colors in HEX format as a workaround:

const colorSettings = useControls('Color Settings', {
  targetColor: { value: parseInt(settings.color.value.replace('#', ''), 16), min: 0, max: 0xFFFFFF, step: 1 },
  // ... other settings ...
});

// ...

color: {
  value: `#${colorSettings.targetColor.toString(16).padStart(6, '0')}`,
  // ... other settings ...
},

Request

Could you please investigate this issue? Any help or guidance would be greatly appreciated.