¡Espero que todos estéis bien, chicos!

He estado trabajando en un desafío de calendario en ReactJS y me enfrento a un problema que realmente no puedo entender, estoy obteniendo días de una API local donde estoy usando una instrucción if donde si el día actual del mes es igual al día en el archivo JSON o menos que ese número, luego devuelva un botón habilitado, de lo contrario, regrese deshabilitado.

Aquí está el problema al que me enfrento: Los días del 3 al 9 están deshabilitados pero quiero que estén habilitados ya que deseo que el usuario pueda hacer clic en ellos. Los días que cuentan después del 25 al 31 están deshabilitados, que es el resultado deseado, pero de alguna manera se estropeó y tomó los días anteriores también del 3 al 9.

Aquí está el código con el que estoy trabajando:

Aquí está el código en formato de texto:

 if (date >= day.day) { return ( <Grid item key={day.id}> <Button key={day.id} sx={{ color: 'white', width: 150, height: 150, backgroundColor: 'primary.dark', '&:hover': { backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7], }, }} > {day.day} </Button> </Grid> ); } else { return ( <Grid item key={day.id}> <Button // Disabled attribute for the days that haven't passed disabled key={day.id} sx={{ color: 'white', width: 150, height: 150, backgroundColor: 'primary.dark', '&:hover': { backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7], }, }} > {day.day} </Button> </Grid> ); }

Aquí está el código para obtener la fecha:

Aquí hay un ejemplo de la API que estoy buscando:

Aquí está de nuevo en formato de código:

 { "id": 1, "day": "1", "chocolateImage": "https://sugarfreelondoner.com/wp-content/uploads/2019/05/keto-milk-chocolate-150x150.jpg" },

Sabe alguien cómo arreglar esto? ¿Estoy haciendo algo mal en el código?

Gracias por cualquier respuesta de antemano y cuídense chicos.