I'm using state hooks to create a feature banner. Everything works except when the page loads the tailwind "focus:" styling doesn't activate until I actually click one of the buttons, even though the state hook is set to (autoProto).

//page function
const Page = ({ data }: Props) => {
  const { data: cardioDI } = data.prismicCardioDi
  const [feature, setFeature] = useState(autoProto);

//buttons to change the state

<button className="w-full overflow-hidden z-40  sm:text-base lg:text-lg text-white hover:text-yellow-600 focus:text-yellow-600" onClick = {() => setFeature(autoProto)}>Automatic Protocolling</button>

<button className="w-full overflow-hidden z-40   sm:text-base lg:text-lg text-white hover:text-yellow-600 focus:text-yellow-600" onClick = {() => setFeature(nlg)}>Natural Language Generation</button>