How to show Hijri and Gregorian dates together using react native

Question

I'm trying to display both hijrj and gregorian dates. However it only shows gregorian.

This is the code.

Libraries

import { Calendar } from 'react-native-calendars';
import moment from 'moment-hijri';
import HijriDate from 'hijri-date';

Hooks and other

const [selectedDate, setSelectedDate] = useState(moment().format('iYYYY-iM-iD'));
const [hijriDate, setHijriDate] = useState('');

useEffect(() => {
    const date = new HijriDate();
    const monthNames = [
      'Muharram',
      'Safar',
      'Rabi al-Awwal',
      'Rabi al-Thani',
      'Jumada al-Awwal',
      'Jumada al-Thani',
      'Rajab',
      'Shaaban',
      'Ramadan',
      'Shawwal',
      'Dhu al-Qidah',
      'Dhu al-Hijjah',
    ];
    const month = monthNames[date.getMonth() - 1];
    const formattedDate = `${date.getDate()} ${month}, ${date.getFullYear()}`;

    setHijriDate(formattedDate);
  }, []);

Custom header

 const renderHeader = (date) => {
    const gregorianDate = moment(date.dateString).format('MMMM, YYYY');
    return (
      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
        <Text style={{ color: COLORS.green, fontSize: 25 }}>{gregorianDate}</Text>
        <Text style={{ color: COLORS.green, fontSize: 25 }}>{hijriDate}</Text>
      </View>
    );
  };

Calendar

<Calendar
            markingType="custom"
            // selectedDate={moment()}
            // markedDates={markedDates}
            onDayPress={onDayPress}
            style={{ marginHorizontal: 10, marginVertical: 10 }}
            theme={{
              calendarBackground: COLORS.white,
              textSectionTitleColor: '#b6c1cd',
              selectedDayBackgroundColor: '#00adf5',
              selectedDayTextColor: '#ffffff',
              todayTextColor: '#00adf5',
              dayTextColor: '#2d4150',
              textDisabledColor: '#d9e1e8',
              dotColor: '#00adf5',
              selectedDotColor: '#ffffff',
              arrowColor: 'orange',
              monthTextColor: 'white',
              indicatorColor: 'blue',
              textDayFontFamily: 'monospace',
              textMonthFontFamily: 'monospace',
              textDayHeaderFontFamily: 'monospace',
              textDayFontSize: 16,
              textMonthFontSize: 16,
              textDayHeaderFontSize: 16,
            }}

            monthTextColor={'red'}
            renderHeader={(date) => {
              // const monthName = moment(date.dateString).format('iYYYY iMMMM iDD');
              return (
                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                  <Text style={{ color: COLORS.green, fontSize: 25 }}>{hijriDate}</Text>
                </View>
              );
            }}
          />

I tried other possible ways like converting the date for each day and then tried showing it below the gregorian date getting undefined.

I need an help to show both hijri and gregorian dates.

I asked chatGpt but to no use.