verticalOpennessRight.js

const state = useContext(MessagesContext);
const [textValue, setTextValue] = useState("");
const [isEmojiEnabled, setIsEmojiEnabled] = useState(false);

const toggleEmoji = () => setIsEmojiEnabled(!isEmojiEnabled);

const myStateRef = useRef(textValue);

const setMyState = (data: any) => {
  myStateRef.current = data;
  setTextValue(data);
};

const addEmoji = (e: any) => {
  let emoji = e.native;
  let text = myStateRef.current + emoji;
  setMyState(text);
};

// Persisting values with refs because listeners didn't update the last value of useState hook
useEffect(() => {
  if (state.sendingMethod === "keypress") {
  let keysPressed: any = {};
  const listener = (event: KeyboardEvent) => {
    keysPressed[event.key] = true;
    if (keysPressed["Control"] && keysPressed["Enter"]) {
     state.sendChatAction({
       from: state.username,
       msg: myStateRef.current,
       time: Date.now()
      });
      setMyState("");
     }
   };

  document.addEventListener("keydown", listener);
  document.addEventListener("keyup", event => {
    delete keysPressed[event.key];
  });

  return () => {
   document.removeEventListener("keydown", listener);
  };
 }
}, []);