Change border color input on focus Flowbite React

Question

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"}
 />

Answer 1

You can use useState and make style object set when focus then style set to input

export default function App() {
  const [value,setvalue]=useState({});
  const handle=()=>{
    const dart={
      border: "red",

    }
    setvalue(dart);
  }
  return (
    <div>

    <input type='text' onFocus={handle} style={value}/>
    </div>
  )
}