Tengo 3 botones que se procesan desde un bucle sobre una matriz y se procesan en reacción.

Los 3 botones se representan en un estado de la siguiente manera:

 const [buttonLoading, setButtonLoading] = UseSafeState({ free: { is_loading: false }, starter: { is_loading: false }, professional: { is_loading: false }, })

(UseSafeState es solo un componente de enlace que hace exactamente lo mismo que useState, pero de forma segura)

Me gustaría que al hacer clic en uno de los botones, se muestre un cargador en este botón específico mientras se espera el final de una solicitud.

Creé este componente de prueba para acortar mi código y prueba. Lo que intento hacer aquí es mostrar el cargador en el botón en el que se hace clic en relación con su nombre.

 export default function Test() { const [buttonLoading, setButtonLoading] = UseSafeState({ free: { is_loading: false }, starter: { is_loading: false }, professional: { is_loading: false }, }) // To set the is_loading property of the specific key of the json state const changeButtonLoading = (type, isLoading) => { const buttonLoadingChanged = buttonLoading buttonLoadingChanged[type].is_loading = isLoading setButtonLoading(buttonLoadingChanged) } const BUTTONS = [ { name: 'free', label: 'FREE' }, { name: 'starter', label: 'STARTER' }, { name: 'professional', label: 'PROFESIONAL' }, ] return BUTTONS.map((button, key) => { return ( <Button key={key} onClick={() => changeButtonLoading(button.name, true)}> {buttonLoading[button.name].is_loading ? <LoaderButton /> : button.label} </Button> ) }) }

(El componente LoaderButton /> es solo un cargador básico con algo de css y html)

Pero el problema es que cuando hago clic en uno de los botones, no muestra el cargador. Pero lo muestra si modifico algo en mi código para forzar un renderizado.