Appending text to the textArea on mouse drop event

Question

I have a react component, which should append text on mouse drop event. The text dropped is being replaced after each drop instead of being appended. Why this is happening?

import React from "react";
import { useDrop } from 'react-dnd';
import { useState } from "react";;

const CodeArea = () => {
  const [areaValue, setAreaValue] = useState("default");

  const addText = (item) => setAreaValue(areaValue + item.text);
  const changeHandler = e => setAreaValue(e.target.value);

  const [, drop] = useDrop(() => ({
    accept: "block",
    drop: addText,
  }));

  return (
    <textarea
      ref={drop}
      id="myTextArea"
      name="myTextArea"
      rows="25"
      cols="50"
      value={areaValue}        // <-- control input value
      onChange={changeHandler} // <--respond to changes
    />
  );
};

CodeArea.propTypes = {
};

export default CodeArea