title: Add emojis to input
body: <p>I am building a chat and I am using a library called <code>emoji-picker-react</code> and I want to add emojis to my text field and then send it as a message. I am using react so I will simplified the code for convinience.
  My messages are working but my emojis not so much.
  So far, if I click the emojis first and follow with some text, is fine.
  But if I type first and I try to add the emojis it won't work.
  Also, if I try to send emojis on its own, it won't work either.
  This is what I used to add emojis on my text field and both do the same.</p>
  <p>This is where I try to add the emojis into my text field and is doing what I just explained:</p>
  <pre><code>const onEmojiClick = (e, emojiObject) =&gt; {
  document.querySelector(&quot;#text&quot;).value += emojiObject.emoji
    // document.getElementById(&quot;text&quot;).value += emojiObject.emoji
  };
  </code></pre>
  <p>And this is my input field:</p>
  <pre><code>&lt;input
   id=&quot;text&quot;
   style={inputStyles}
   type=&quot;text&quot;
   placeholder=&quot;Type your message&quot;
   value={message}
   onKeyPress={e =&gt; {
    if (e.key !== 'Enter') return;
      sendMessage(message);
    }
   }
   onChange={e =&gt; setMessageForm(e.target.value)}
  /&gt;
  </code></pre>
  <p>I am sure is something simple but can't get my head around it. I hope someone can guide on this.</p>
  <p>Thank you!</p>