Change border color input on focus Flowbite React

I am trying to change the color when focusing on an input in the Flowbite React library, but it's not working. I hope someone can help me.

<TextInput
   id="email"
   placeholder="email@gmail.com"
   value={email}
   onChange={handleEmailChange}
   className="flex-1 focus:ring-primary-600 focus:border-primary-600"
   helperText={<span className="font-medium">{emailError}</span>}
   color={emailError ? "failure" : "gray"}
 />

According to the official docs Here,

These are the styles that come with it by default

bg-gray-50 border-gray-300 text-gray-900 focus:border-cyan-500 focus:ring-cyan-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-cyan-500 dark:focus:ring-cyan-500

You just need to add a theme prop to the <TextInput/> as shown below or make a new file named themes.js/ts

const inputTheme = {
 input: {
  colors: {
   gray: "focus:border-your-color focus:ring-your-color ...rest of the 
          styles above"   
  }
 }
}

And then import and use it like this

<TextInput theme={inputTheme} ... />

Note: Doing this will actually replace the TextInput Style, it does not extend it, Hence, we have to add the rest of the styles