How to modify data with Riverpod?

[Uwanggood]

What's the best practice for data updates in Riverpod: AsyncNotifier vs direct provider?

Current Setup

I have this widget that uses a provider to fetch data:

class TeacherSalaryDtl extends HookConsumerWidget {
  const TeacherSalaryDtl({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final provider = teacherSalaryDtlNotifierProvider(
      SelectSalaryDtlRequest(
        teacherId: teacherId,
        calcYm: calcYm,
      ),
    );
    final notifier = ref.read(provider.notifier);
    final state = ref.watch(provider);

    return LayoutBuilder(
      builder: (context, constraints) {
        return state.when(
          data: (data) {
            return Column(
              children: [
                // Display the data
                Text(data.salaryAmount.toString()),
                
                // Input field to update salary
                TextField(
                  keyboardType: TextInputType.number,
                  decoration: InputDecoration(labelText: 'New Salary'),
                  // ❓ How do I update data when this value changes?
                  // onChanged: (value) {
                  //   // What do I do here to update the data?
                  // },
                ),
                
                // ❓ How do I save the updated value?
                ElevatedButton(
                  onPressed: () {
                    // What do I call here?
                  },
                  child: Text('Save'),
                ),
              ],
            );
          },
          loading: () => CircularProgressIndicator(),
          error: (error, stack) => Text('Error: $error'),
        );
      },
    );
  }
}

The Dilemma

If I use the code like above, I can't properly use the notifier for MVVM pattern.

If I try to create a proper notifier, it ends up looking like this:

@riverpod
class TeacherSalaryDtlNotifier extends _$TeacherSalaryDtlNotifier {
  @override
  Future<SelectSalaryDtlResponse> build(SelectSalaryDtlRequest request) async {
    final response = await ref.read(selectSalaryDtlProvider(request).future);
    return response;
  }
  
  // All API error handling has to be done here
  // But the pattern seems strange
}

Question

What's the best practice here?

1. Should I use the notifier approach despite it feeling awkward for updates?
2. Is there a better pattern for handling data modifications in Riverpod?
3. How do you implement proper MVVM with Riverpod's AsyncNotifiers?

I can't find clear examples that demonstrate a clean architecture approach with Riverpod for both reading AND updating data.