input.tsx

const CustomTextRenderInput: React.FC<IProps> = ({
  readonly,
  value = "",
  onChange,
}) => {
  const [currentOriginalContent, setOriginalContent] = React.useState(value);
  const [currentRenderedContent, setRenderedContent] = React.useState(
    mentionRender(value, CommonRenderer),
  );
  const handleChange = React.useCallback((e: ContentEditableEvent) => {
    const text = e.currentTarget.textContent || "";
    const linkifyResult = mentionRender(text, CommonRenderer);

    setOriginalContent(text);
    setRenderedContent(linkifyResult);

    if (onChange) onChange(text);
  }, []);
  
  const handleKeyDown = React.useCallback(
    (e: React.KeyboardEvent) => {
      if (e.keyCode === 13 && !e.shiftKey) {
        e.preventDefault();
      }

      //---------------------
      // Unknonw: 이 코드가 호출될때 currentOriginalContent 에 데이터가 없다고 찍힘
      //---------------------
  
      if ((e.keyCode === 8 || e.keyCode === 46) && !currentOriginalContent) {
        e.preventDefault();
      }
    },
    [currentOriginalContent],
  );

  return (
    <Wrapper>
      <ContentEditable
        className="editor"
        disabled={readonly}
        html={currentRenderedContent}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
      />
    </Wrapper>
  );
};