How to manipulate/modify external UI component library in react?

I'm working on an app that uses an open source calendar library that renders the day as spans. I wish to change certain days to another button component library.

Example snippet of the external library usage

import Calendar, { CalendarView } from 'calendar' // import component
import '../styles/index.css'; // import styles

const CalendarComponent: FC<CalendarComponentType> = ({
    {...props}
}) => {
  return (
    <>
      <Calendar
        onEventClick={onEventClick}
        onNewEventClick={onNewEventClick}
        events={[]}
        initialDate={new Date().toISOString()}
        hourHeight={60}
        initialView={CalendarView.WEEK}
        disabledViews={[CalendarView.DAY]}
        onSelectView={onSelectView}
        selectedView={selectedView}
        onPageChange={onPageChange}
        timeFormat={'24'}
        weekDayStart={'Monday'}
        calendarIDsHidden={['work']}
        language={'en'}
      />
    </>
  );
}

export default CalendarComponent;

it renders a deeply nested HTML component

<div class="CalendarContainer">
    <div class="CalendarNavigation">
        ... content
    </div>
    <div class="CalendarBody">
        <div class="CalendarTimeTable">
            <div id="Calendar_day__2022-08-01" class="DayViewOneDay">
                <span class="Calendar_text__day">01</span>
                ... content
            </div>
            <div id="Calendar_day__2022-08-02" class="DayViewOneDay">
                <span class="Calendar_text__day">02</span>
                ... content
            </div>
            <div id="Calendar_day__2022-08-03" class="DayViewOneDay">
                <span class="Calendar_text__day">03</span>
                ... content
            </div>
            <div id="Calendar_day__2022-08-04" class="DayViewOneDay">
                <span class="Calendar_text__day">04</span>
                ... content
            </div>
            <div id="Calendar_day__2022-08-05" class="DayViewOneDay">
                <span class="Calendar_text__day">05</span>
                ... content
            </div>
        </div>
    </div>
</div>

For example, I want to modify certain days from <span> to button component from another component library so it becomes

<div id="Calendar_day__2022-08-02" class="DayViewOneDay">
    <CustomButton>
        ... content 
    </CustomButton>
    ... content
</div>

Is there any way to do this without modifying the source library?