Unicode emojis breaks in RTL TextField

Question

I am making a chat part in my app. when I was implementing an emoji picker button that opens an emoji widget from the bottom. To add an emoji to the controller:

(String emoji) {
      final text = msg.text;

      msg.value = TextEditingValue(
        text: "$text$emoji",
      );
    }

everything is working fine when adding emojis and text together. I tried to implement a text direction changer to change the direction of the text field to cope with RTL languages like arabic:

Expanded(
    child: ValueListenableBuilder<TextDirection>(
        valueListenable: _textDirection,
        builder: (context, textDirection, child) {
          return TextField(
            decoration: InputDecoration(
              fillColor: Colors.transparent,
              contentPadding:
                  EdgeInsets.symmetric(vertical: 5, horizontal: 8),
              hintText:
                  AppLocalizations.of(context)!.translate('message'),
              hintStyle: TextStyle(
                  color: const Color(0xff98A4AE),
                  fontSize: Fonts.title,
                  fontWeight: FontWeight.w300),
              border: InputBorder.none,
            ),
            controller: widget.msg,
            textDirection: textDirection,
            onTap: () async {
              widget.chatController.isEmojiOpened.value = false;
            },
            keyboardType: TextInputType.multiline,
            style: TextStyle(
              color: AppColors.text(context),
              fontSize: Fonts.title,
              fontWeight: FontWeight.w300,
            ),
            maxLines: 5,
            minLines: 1,
            focusNode: focusNode,
          );
        }),
      )

it works well, the direction changes when the first character is RTL, but when the text direction is RTL and then add at least 1 emoji and try to add another RTL character, it breaks and shows a weird character (probably not an actual unicode) but it only breaks the last unicode character. If instead of a RTL character, I type english for example, it will work fine. Can someone explain why and how to solve this issue? it only happens if the TextField is RTL.

EMOJIS example:

const List<String> emojiList = [
  '😂', // Face with Tears of Joy
  '❤️', // Red Heart
  '😍', // Smiling Face with Heart-Eyes
  '🤣', // Rolling on the Floor Laughing
  '😊', // Smiling Face with Smiling Eyes
  '🥰', // Smiling Face with Hearts
  '😅', // Grinning Face with Sweat
  '😁', // Beaming Face with Smiling Eyes
  '😉', // Winking Face
];

Example of Broke characters:

أهلا 🙃😂😇𒈩?

EDIT

I even tried using emoji_picker_flutter package but it showed the same weird characters, it seems like the error is either with flutter itself or the way we handle emojis in RTL. I also tried to add a LTR character or even a new line and it did the same thing.

UPDATE I tried a work-around using ZWSP (Zero Width Space) characters like "\u200C", I tried adding them after each emoji. I then tried adding arabic characters and it worked, even if I then removed that extar ZWSP, it still works, but then the user would need to double delete to delete extra ZWSP which is not efficient. can someone reproduce this ?

UPDATE 2 I tried just to add the emoji to the textfield on ios simulator and nothing weird happens, I was testing on a real device android and it only occurred on it. I don't know why the problem is only happening on the real device and not on the emulators.