How to enable button to be clicked for current and previous days but not for future ones?

Question

I am currently trying to have buttons that change the completion of a ToDo when clicked, but I only want to enable the button to be clicked for previous days and the current one.

For example, let's say that it is Wednesday, then I want my button to be enabled for Monday, Tuesday and Wednesday, but not for later days.

In my API I couldn't get the Days to be sent, just the id of the Day. So Sun: 1 ... Sat:7, and I can't think of a way to do that.

This is a code snippet for today being Sunday so the button should be enabled, but it is disabled for the rest of the days, it is just an idea of what I am trying to accomplish.

<div key={day.id}>
  {habit.id === day.habitId && (
    <>
      {firstDay === "Sun" && day.id === 1 ?
        <form onSubmit={onSubmit}>
          {!day.isCompleted ? 
            <button type="submit" onClick={() => {setHandleChange([day.id, day.isCompleted]); setCompletion(!day.isCompleted)}}>[]</button>
            : <button style={{ color: habit.color }} type="submit" onClick={() => setHandleChange([day.id, day.isCompleted])}>[]</button>
          }
        </form>
        : <button disabled type="submit" onClick={(e) => {  setHandleChange([day.id, day.isCompleted]); setCompletion(e.target.value) }}>[]</button>
      }
    </>
  )}
</div>

firstDay is obtained by manipulating new Date so it is a dynamic variable. How can I make this idea dynamic, so that if the day.id === 7 then all the buttons can be clicked, if day.id === 1 then only the one for Sun can be clicked, if day.id === 3 then Sun, Mon and Tue can be clicked but not the rest?