[React]ハイライトがずれてしまうのを直したい

Question

前提・実現したいこと

react-highlight-within-textareaを使って、テキストエリアの"あるテキスト"に対してハイライトを付けたいと思っています。しかし、表示してみると写真のようにずれてしまいます。
特に変わったことはしておらず、サンプルコードのままでこのようになってしまいます。
これは自分の環境だけなのでしょうか。
どなたか試していただけると幸いです。
https://www.npmjs.com/package/react-highlight-within-textarea

発生している問題・エラーメッセージ

該当のソースコード

import React from "react";
import { useState } from "react";
import { HighlightWithinTextarea } from "react-highlight-within-textarea";

const OriginalTextarea = () => {
  const [value, setValue] = useState("potate   ");
  return (
    <HighlightWithinTextarea
      value={value}
      highlight={"potate"}
      onChange={(event) => setValue(event.target.value)}
      rows="4"
    />
  );
};

export default OriginalTextarea;

Comments

[hoshi-takanori]

こちらで試したところ、ちゃんと potate がハイライトされましたけど…。