Is it possible to style the past and future dates of react date picker?

Question

I am using react date picker to build a custom date but I cant seem to be able to style past dates. All dates lower than the present date should have a grey background.The present date should have a past background and the future dates should all have a white background with a black border;

Code I have written to override current styles but I cant seem to figure this out

.css-gbrmys>*:not(style)~*:not(style){
    margin-top: 0px !important;
}

.react-datepicker__input-container > input {
 height: 42px !important;
 border-radius: 8px !important;
 background: #fff !important;
 width: 100% !important;
 border: 1px solid #E0E0E0 !important;
 text-indent: 12px;
}

.react-datepicker__triangle{
    display: none !important;
}

.react-datepicker__header{
  border: none !important;
  background-color: #fff !important;
}
.css-2v22cu{
    margin-top: 13px !important;
    margin-bottom: 13px !important;
    
}
.react-datepicker{
    font-family: 'Red Hat Display', sans-serif !important;
    font-size: 14px !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0px 8px 16px rgba(17, 17, 17, 0.06) !important;
}

.react-datepicker__current-month{
    font-size: 18px !important;
}
.react-datepicker__day-name{
    color: #9C9C9C !important;
    font-size: 14px !important;
    line-height:  21px !important;
}

.react-datepicker__day-names{
    margin-left: 18px !important;
    margin-right: 18px !important;
}

.react-datepicker__day{
    background: #EEEEEE !important;
    font-size: 14px !important;
    line-height:  21px !important;
    border-radius: 4px !important;
    color: #9C9C9C !important;
}

.react-datepicker__day--selected{
    background: #000000 !important;
    color: white !important;
}
.react-datepicker__month {
    margin-bottom: 25px !important;
    margin-top: 0.4rem !important;
    margin-left: 0.4rem !important;
    margin-right: 0.4rem !important;
}