How to Implement Event Confirmation and Background Color Change in Kendo UI Scheduler Wrapper for React?

Question

I'm working on a React application where I'm using the Kendo UI Scheduler component to manage events. I need to implement a feature where events change their background color based on whether they've been confirmed or not. Initially, newly created events should have a white background, and after a user confirms the event from a dialog, its background should change to green.

I've created a wrapper component around the Kendo UI Scheduler to achieve this functionality, and I'm using TypeScript for my project. However, I'm having trouble figuring out how to properly manage the event confirmation and background color change logic within my wrapper component.

Here's what I have so far:

import * as React from 'react';
import { Scheduler, SchedulerProps } from '@progress/kendo-react-scheduler';
import { Dialog } from '@progress/kendo-react-dialogs';

interface CustomEvent {
  id: number;
  title: string;
  start: Date;
  end: Date;
  confirmed: boolean;
}

interface CustomSchedulerProps extends SchedulerProps {
  events: CustomEvent[];
  onEventConfirm: (eventId: number) => void;
}

const CustomScheduler: React.FC<CustomSchedulerProps> = ({ events, onEventConfirm, ...rest }) => {
  // ...
};

export default CustomScheduler;

I'm struggling with how to correctly manage the selectedEvent and event confirmation state within this component. Additionally, I'm not sure how to update the event's background color based on the confirmation status.

Could someone provide guidance on how to approach this problem? Any help, code examples, or suggestions would be greatly appreciated. Thank you!