Syncfusion Flutter Calendar with Custom Widget

Need a little help here!!

I'm trying to use the syncfusion_flutter_calendar: ^23.1.36 in my FF project by creating a custom widget and displaying it on a calendar screen but I don't know why it is not displaying the tasks list I'm passing to it and there are no errors in the app.

What I want to show is a Gantt chart to be able to plan and track my projects, and maybe display it on Zoom calls during planning and make changes in real-time by dragging and dropping them where and when required and maybe some other things along the lines.

I'm sharing below the code I have managed to create so far, Please help me fix it.

One more thing when I created the parameter of the tasks list in the custom widget whose type is project_tasks_data(schema) it became <ProjectTasksDataRecord> I think it is because it is a list of documents so I gave the same return type everywhere else in the custom widget.

// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:syncfusion_flutter_calendar/calendar.dart';

class SyncfusionCalendar extends StatefulWidget {
  const SyncfusionCalendar({
    Key? key,
    this.width,
    this.height,
    required this.tasks,
  }) : super(key: key);

  final double? width;
  final double? height;
  final List<ProjectTasksDataRecord> tasks;

  @override
  _SyncfusionCalendarState createState() => _SyncfusionCalendarState();
}

class _SyncfusionCalendarState extends State<SyncfusionCalendar> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SfCalendar(
      view: CalendarView.timelineMonth,
      dataSource: TaskDataSource(widget.tasks),
      // by default the month appointment display mode set as Indicator, we can
      // change the display mode as appointment using the appointment display
      // mode property
      monthViewSettings: const MonthViewSettings(
          appointmentDisplayMode: MonthAppointmentDisplayMode.appointment),
    ));
  }
}

/// An object to set the appointment collection data source to calendar, which
/// used to map the custom appointment data to the calendar appointment, and
/// allows to add, remove or reset the appointment collection.
class TaskDataSource extends CalendarDataSource {
  /// Creates a meeting data source, which used to set the appointment
  /// collection to the calendar
  TaskDataSource(List<ProjectTasksDataRecord> source) {
    appointments = source;
  }

  @override
  DateTime getStartTime(int index) {
    return _getTaskgData(index).startDate!;
  }

  @override
  DateTime getEndTime(int index) {
    return _getTaskgData(index).endDate!;
  }

  @override
  String getSubject(int index) {
    return _getTaskgData(index).taskTitle;
  }

  @override
  Color getColor(int index) {
    return _getTaskgData(index).taskColor!;
  }

  @override
  bool isAllDay(int index) {
    return _getTaskgData(index).allDay;
  }

  ProjectTasksDataRecord _getTaskgData(int index) {
    final dynamic task = appointments![index];
    late final ProjectTasksDataRecord taskData;
    if (task is ProjectTasksDataRecord) {
      taskData = task;
    }

    return taskData;
  }
}