Combining DatePicker and TimePicker then convert it as a String value in Flutter

Question

currently im developing a flutter e-commerce app. the objective of this app is customer can order the food for the future. to achieve that, i need to give my customer a feature to pick a date and time for delivering their orders. the problem is, the UI isn't updating when the customer pick the date and time.

this is my billing_date_section.dart

import 'package:comro_alt/common/widgets/texts/section_heading.dart';
import 'package:comro_alt/features/shop/controllers/date_controller.dart';
import 'package:comro_alt/utils/constants/sizes.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:iconsax/iconsax.dart';
import 'package:intl/intl.dart';

class CBillingDateSection extends StatefulWidget {
  const CBillingDateSection({super.key});

  @override
  State<CBillingDateSection> createState() => _CBillingDateSectionState();
}

class _CBillingDateSectionState extends State<CBillingDateSection> {
  @override
  Widget build(BuildContext context) {
    final dateController = Get.put(DateController());
    DateTime deliveryDateTime = DateController.instance.deliveryDateTime;
    String deliveryDateTimeString = DateFormat('E, dd MMM yyyy - HH.mm').format(deliveryDateTime);

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        //heading
        CSectionHeading(
          title: 'Shipping Date',
          showActionButton: true,
          buttonTitle: 'Select Date and Time',
          onPressed: () {
            dateController.selectDateTime(context);
          },
        ),
        const SizedBox(height: CSizes.spaceBtwItems),

        //date
        Row(
          children: [
            const Icon(
              Iconsax.calendar,
              size: 16,
            ),
            const SizedBox(width: CSizes.spaceBtwItems / 2),
            Text(deliveryDateTimeString),
          ],
        ),
        const SizedBox(height: CSizes.spaceBtwItems / 2),
      ],
    );
  }
}

and this is my date_controller.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class DateController extends GetxController {
  static DateController get instance => Get.find();

  //variable
  DateTime deliveryDateTime = DateTime.now();
  DateTime? deliveryDate = DateTime.now();
  TimeOfDay? deliveryTime = TimeOfDay.now();
  
  Future<void> selectDateTime(BuildContext context) async {
    final DateTime? pickedDate = await showDatePicker(
      context: context,
      firstDate: deliveryDate!,
      lastDate: deliveryDate!.add(const Duration(days: 90)),
    );
    deliveryDate = pickedDate;

    if (!context.mounted) return;
    final TimeOfDay? pickedTime = await showTimePicker(
      context: context,
      initialTime: deliveryTime!,
    );
    deliveryTime = pickedTime;
  }

  Future convertDateTime() async {
    final DateTime combinedDateTime = DateTime(
      deliveryDate!.year,
      deliveryDate!.month,
      deliveryDate!.day,
      deliveryTime!.hour,
      deliveryTime!.minute,
    );
    deliveryDateTime = combinedDateTime;
  }
}

actually, when i write the code from date_controller.dart inside the billing_date_section.dart, the code work just fine. but, i need to make that controller because i need to pass the value to OrderModel that includes information about the order detail.

insde the billing_date_section.dart i already tried to change the state to StatefulWidget and wrap the Text(deliveryDateTimeString) widget with Obx. the result is either the text of datetime string isn't changing, or the CheckoutScreen (the parents of billing_date_section.dart) can't opened at all.