Json serialization of nested objects dart - json

Question

I am trying to generate fromJSON and toJson functions for my nested objects using the json_serializable library. But when I tried to use the generated functions, I got an error with deserialization of the nested object.
I think I understand how to write toJSON and FromJSON functions. But I want to figure out how to work with the json_serializable library and work with the generated code.
Class with models:
import 'package:json_annotation/json_annotation.dart';
part 'models.g.dart';
#JsonSerializable()
class OfficesList {
List<Office> offices;
OfficesList({required this.offices});
factory OfficesList.fromJson(Map<String, dynamic> json) => _$OfficesListFromJson(json);
Map<String, dynamic> toJson() => _$OfficesListToJson(this);
}
#JsonSerializable()
class Office {
final String name;
final String address;
final String image;
Office({required this.name, required this.address, required this.image});
factory Office.fromJson(Map<String, dynamic> json) => _$OfficeFromJson(json);
Map<String, dynamic> toJson() => _$OfficeToJson(this);
}
Generated class:
// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'models.dart';
// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************
OfficesList _$OfficesListFromJson(Map<String, dynamic> json) => OfficesList(
offices: (json['offices'] as List<dynamic>)
.map((e) => Office.fromJson(e as Map<String, dynamic>))
.toList(),
);
Map<String, dynamic> _$OfficesListToJson(OfficesList instance) =>
<String, dynamic>{
'offices': instance.offices,
};
Office _$OfficeFromJson(Map<String, dynamic> json) => Office(
name: json['name'] as String,
address: json['address'] as String,
image: json['image'] as String,
);
Map<String, dynamic> _$OfficeToJson(Office instance) => <String, dynamic>{
'name': instance.name,
'address': instance.address,
'image': instance.image,
};
void main(){
Office of1 = Office(name: "pupa", address: "lupa", image: "image");
Office of2 = Office(name: "lupa", address: "pupa", image: "image");
OfficesList list1 = OfficesList(offices: [of1,of2]);
OfficesList list2 = OfficesList.fromJson(list1.toJson());
print(list2.toJson());
}
The exception in these lines
OfficesList list2 = OfficesList.fromJson(list1.toJson())
.map((e) => Office.fromJson(e as Map<String, dynamic>))
Unhandled exception:
type 'Office' is not a subtype of type 'Map<String, dynamic>' in type cast
#0 _$OfficesListFromJson.<anonymous closure> (package:jsom_test/models.g.dart:11:41)
#1 MappedListIterable.elementAt (dart:_internal/iterable.dart:413:31)
#2 ListIterator.moveNext (dart:_internal/iterable.dart:342:26)
#3 new _GrowableList._ofEfficientLengthIterable (dart:core-patch/growable_array.dart:189:27)
#4 new _GrowableList.of (dart:core-patch/growable_array.dart:150:28)
#5 new List.of (dart:core-patch/array_patch.dart:51:28)
#6 ListIterable.toList (dart:_internal/iterable.dart:213:44)
#7 _$OfficesListFromJson (package:jsom_test/models.g.dart:12:12)
#8 new OfficesList.fromJson (package:jsom_test/models.dart:9:62)
#9 main (package:jsom_test/json_test.dart:9:35)
#10 _delayEntrypointInvocation.<anonymous closure> (dart:isolate-patch/isolate_patch.dart:297:19)
#11 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:192:12)