having problem with Draggble widget in flutter - flutter

Question

In BottomShield, there are emojis that users can drag to the parent widget, which is a GridView. As you can see in the code, I placed the grid view in a stack where there is a transparent emoji. When the user moves the emoji in BottomShield to the parent widget, I expect it to substitute this transparent emoji, but it doesn't. I would really appreciate some help with this. Thank you
class GridViewCustom extends StatefulWidget {
final String imgUrl;
final int itemCount;
const GridViewCustom({
required this.imgUrl,
required this.itemCount,
super.key,
});
#override
State<GridViewCustom> createState() => _GridViewCustomState();
}
class _GridViewCustomState extends State<GridViewCustom> {
String overlayImg = 'assets/images/poo2.png';
#override
Widget build(BuildContext context) {
return GridView.custom(
gridDelegate: SliverQuiltedGridDelegate(
crossAxisCount: 2,
crossAxisSpacing: 4,
mainAxisSpacing: 10,
repeatPattern: QuiltedGridRepeatPattern.inverted,
pattern: [
QuiltedGridTile(2, 2),
QuiltedGridTile(1, 1),
QuiltedGridTile(1, 1),
QuiltedGridTile(1, 2),
],
),
childrenDelegate: SliverChildBuilderDelegate(
(context, index) {
return GestureDetector(
onTap: () {
dialog(context);
},
child: Stack(
alignment: Alignment.center,
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(widget.imgUrl),
fit: BoxFit.fill,
),
),
),
DragTarget<String>(
onAccept: (data) => setState(() {
overlayImg = data;
}),
builder: (context, candidateData, rejectedData) =>
Container(
height: 80,
width: 90,
decoration: BoxDecoration(
color: Colors.transparent,
image: DecorationImage(
opacity: 0,
image: AssetImage(
overlayImg,
),
fit: BoxFit.fill,
),
),
),
),
],
),
);
},
));
}
Future<dynamic> dialog(BuildContext context) {
return showModalBottomSheet(
elevation: 0,
backgroundColor: Colors.black,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
top: Radius.circular(15),
),
),
context: context,
builder: (BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Emoji(urlPath: 'assets/images/poo1.png'),
Emoji(urlPath: 'assets/images/poo2.png'),
Emoji(urlPath: 'assets/images/poo3.png'),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Emoji(urlPath: 'assets/images/poo4.png'),
Emoji(urlPath: 'assets/images/poo5.png'),
Emoji(urlPath: 'assets/images/poo6.png'),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Emoji(urlPath: 'assets/images/poo7.png'),
Emoji(urlPath: 'assets/images/poo8.png'),
Emoji(urlPath: 'assets/images/poo4.png'),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Emoji(urlPath: 'assets/images/poo3.png'),
Emoji(urlPath: 'assets/images/poo6.png'),
Emoji(urlPath: 'assets/images/poo2.png'),
],
),
],
);
});
}
}
class Emoji extends StatefulWidget {
final String urlPath;
Emoji({required this.urlPath, super.key});
#override
State<Emoji> createState() => _EmojiState();
}
class _EmojiState extends State<Emoji> {
#override
Widget build(BuildContext context) {
return Draggable(
data: widget.urlPath,
feedback: Container(
height: 70,
width: 70,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(widget.urlPath),
fit: BoxFit.fill,
),
),
),
child: Container(
height: 70,
width: 70,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(widget.urlPath),
fit: BoxFit.fill,
),
),
),
);
}
}