Estoy usando ganchos de estado para crear un banner de características. Todo funciona excepto cuando la página carga el "foco" de viento de cola: el estilo no se activa hasta que hago clic en uno de los botones, aunque el enlace de estado esté configurado en (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>