Datepicker range Plotly-Dash - Make user unable to include disabled dates in the date range

Question

I am using the datepickerrange component in plotly dash, and i am trying to make it so that whenever a starting date is selected, it will not be possible to include a disabled date inside the interval.

Example: i select the 5th of may as starting date. Since i have disabled the 10th of may, it should only be possible to select 5th of may - 9th of may in order to avoid a disabled date inside the date interval.

In this example i need to change the max_date_allowed to be the 9th of may, and the min_date_allowed to be the 5th of may after selecting the 5th as starting date.

from dash import Dash, dcc, html
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate

disabled_days = ['2022-05-10']

app = Dash(__name__)
app.layout = html.Div([
    dcc.DatePickerRange(
        id='my-date-picker-range',
        minimum_nights=2,
        number_of_months_shown=2,
        clearable=True,
        disabled_days=disabled_days,
    ),
])


@app.callback(
    Output('my-date-picker-range', 'max_date_allowed'),
    Output('my-date-picker-range', 'min_date_allowed'),
    Input('my-date-picker-range', 'start_date'))
def update_output(start_date):
    if start_date is not None:
        return '2022-05-09', '2022-05-05'
    else:
        raise PreventUpdate


if __name__ == '__main__':
    app.run_server(debug=True)

In this script, dates outside min-max date are not clickable and do not show a hover colour, however, the CSS appearance of the numbers do not turn grey. I would like to fix it such that the dates are both disabled physically, and their appereance are also changed.