Certain specific characters cause a null substring issue.

[davecalderwood]

I have an FAQ page with dropdowns and a text area for filtering results. I am using this package to highlight my words that I search for in the text input. Everything works fine, except the letter "n" weirdly. All special characters, numbers, and other letters seem to work just fine. And if "n" is in any spot in the string EXCEPT the first position it works. When typing "n" or "N" as the very first character in the text search input field, I get this issue:

TypeError: Cannot read properties of null (reading 'substr') at the Highlighter.js component
const text = textToHighlight.substr(chunk.start, chunk.end - chunk.start)

`FAQItems = filterFAQ?.map((faq) => {
let categoryMeta = faq['CategoryMetadata/Category'];
let subCategoryMeta = faq['SubCategoryMetadata/SubCategory'];

    return <FaqItems 
        key={faq.ID}
        id={faq.ID}
        question={faq.Question}
        description={displayRichText(faq.Description)}
        answer={displayRichText(faq.Answer)}
        postedDate={faq.ItemCreated}
        category={categoryMeta}
        subCategory={subCategoryMeta}
        highlightText={searchFilter}
    />
})`

Then in the child component

`import React from 'react';

import { Link } from "react-router-dom";
import Highlighter from "react-highlight-words";
import { formatUTCDateToLocal } from '../../GlobalFunctions';

const FaqItems = (props) => {

let createdDate = formatUTCDateToLocal(props.postedDate);
const highlightText = props.highlightText || "";

return (
    <li>
        <article>
            <Link to="/FAQ" className="anchortitle" title={props.question}>
                <Highlighter
                    searchWords={[highlightText]}
                    textToHighlight={props.question}
                    autoEscape={true}
                />
            </Link>
            <p>
                <Highlighter
                    searchWords={[highlightText]}
                    textToHighlight={props.description}
                    autoEscape={true}
                />
            </p>
            <p>
                <strong>Answer: </strong>
            </p>
            <p>
                <Highlighter
                    searchWords={[highlightText]}
                    textToHighlight={props.answer}
                    autoEscape={true}
                />
            </p>
            
            <div className="articleinfo">
                <span>Posted Date : <em>{createdDate}</em></span>
                {props.subCategory && <span> SubCategory : <em>{props.subCategory}</em></span>}
                <span> Category : <em>{props.category}</em></span>
            </div>
        </article>
       
    </li>
);

}

export default FaqItems;`

[sergei-startsev]

@davecalderwood could you create a sandbox with a minimal set of steps to reproduce the issue?