Type error: using strings inside "colors" prop

[matteo-gobbo]

Hi, I'm experiencing some issues using the latest version of the library.

The project in which I'm using the library is a Vite + TypeScript + React project. I'm using the version 3.2.1 of react-countdown-circle-timer.

I'm trying to declare the component this way:

<CountdownCircleTimer
    key={countDownKey}
    strokeWidth={4}
    size={45}
    isPlaying={!!canOpenModal}
    duration={35}
    colors={[COLORS.PRIMARY, COLORS.ORANGE, COLORS.RED_MAIN]}
    colorsTime={[35, 16, 0]}
>
    {({ remainingTime }) => remainingTime}
</CountdownCircleTimer>

but I'm receiving this type error for "colors" prop:

Type '[ColorFormat, ColorFormat, ColorFormat]' is not assignable to type 'ColorFormat | ({ 0: `#${string}`; } & { 1: `#${string}`; } & `#${string}`[])'.
  Type '[ColorFormat, ColorFormat, ColorFormat]' is not assignable to type '{ 0: `#${string}`; } & { 1: `#${string}`; } & `#${string}`[]'.
    Type '[ColorFormat, ColorFormat, ColorFormat]' is not assignable to type '{ 0: `#${string}`; }'.
      Types of property '0' are incompatible.
        Type 'ColorFormat' is not assignable to type '`#${string}`'.
          Type '`rgb(${string})`' is not assignable to type '`#${string}`'

The colors constants are defined in an object like this one:

const COLORS = {
 PRIMARY: "#000000",
ORANGE: "#111111",
RED_MAIN: "#222222"
}
,

[vydimitrov]

Can you try one of the two below:

const COLORS = {
 PRIMARY: "#000000",
ORANGE: "#111111",
RED_MAIN: "#222222"
} as const;

or

const COLORS: Record<string, `#${string}`> = {
 PRIMARY: "#000000",
ORANGE: "#111111",
RED_MAIN: "#222222"
}

[matteo-gobbo]

It worked, thank you!