Locale change does not changes the date's language

[memon07]

In the below code i have just replicated the example code and passed the locale as 'ar'. I can see that the month and week language has been changed to arabic but it didnt changed the numbers (days).

can you help me undertand how to change the day's language too.

  import DateTimePicker from 'react-native-ui-datepicker';
  import dayjs from 'dayjs';
  import moment from 'moment';
  import {useSelector} from 'react-redux';

  import 'dayjs/locale/en';
  import 'dayjs/locale/de';
  import 'dayjs/locale/es';
  import 'dayjs/locale/fr';
  import 'dayjs/locale/tr';
  import 'dayjs/locale/ar';
  
  require('dayjs/locale/ar');
  
  
  export default function DateRange() {
    const [mode, setMode] = useState('range');
    const [timePicker, setTimePicker] = useState(false);
  
    const [date, setDate] = useState();
    const [range, setRange] = React.useState({ startDate: undefined, endDate: undefined });
    const [dates, setDates] = useState();
  
    const [theme, setTheme] = useState([{ mainColor: '#0047FF', activeTextColor: '#fff' }]);
    const localeReducer = useSelector(state => state.languageReducer.locale);
    const language = localeReducer.split('-')[0];
    
  
    dayjs.locale(language)
    
    const [locale, setLocale] = useState('ar');
    
    console.log('localeReducer',localeReducer,locale);

    const onChange = useCallback(
      (params) => {
        if (mode === 'single') {
          setDate(params.date);
        } else if (mode === 'range') {
          setRange(params);
        } else if (mode === 'multiple') {
          setDates(params.dates);
        }
      },
      [mode]
    );

    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.body}>
  
          <View style={styles.datePickerContainer}>
            <View style={styles.datePicker}>
              <DateTimePicker
                mode={mode}
                date={date}
                locale={locale}
                startDate={range.startDate}
                endDate={range.endDate}
                dates={dates}
                //minDate={dayjs().startOf('day')}
                //maxDate={dayjs().add(3, 'day').endOf('day')}
                //disabledDates={[dayjs(), dayjs().add(1, 'day')]}
                //disabledDates={(date) => [0, 6].includes(dayjs(date).day())} // disable weekends
                //firstDayOfWeek={1}
                displayFullDays
                timePicker={timePicker}
                onChange={onChange}
                headerButtonColor={theme?.mainColor}
                selectedItemColor={theme?.mainColor}
                // eslint-disable-next-line react-native/no-inline-styles
                selectedTextStyle={{
                  fontWeight: 'bold',
                  color: theme?.activeTextColor,
                }}
                // eslint-disable-next-line react-native/no-inline-styles
                todayContainerStyle={{
                  borderWidth: 1,
                }}
              />
              <View style={styles.footer}>
                {mode === 'range' ? (
                  <View style={{ gap: 3 }}>
                    <Text>
                      <Text style={{ marginRight: 5, fontWeight: 'bold' }}>
                        Start Date:
                      </Text>
                      {range.startDate
                        ? dayjs(range.startDate)
                            .locale(locale)
                            .format('MMMM, DD, YYYY')
                        : '...'}
                    </Text>
                    <Text>
                      <Text style={{ marginRight: 5, fontWeight: 'bold' }}>
                        End Date:
                      </Text>
                      {range.endDate
                        ? dayjs(range.endDate)
                            .locale(locale)
                            .format('MMMM, DD, YYYY')
                        : '...'}
                    </Text>
                  </View>
                ) : null}
              </View>
            </View>
          </View>
  
        </View>
      </SafeAreaView>
    );
  }