Así es como puede deshacerse de esto para que siempre se muestre el signo "+" y no los caracteres incomprensibles. No sé cómo puedes escribir el código para que funcione normalmente.

 const [isSearchOpen, setSearchOpen] = useState(false), formRef = useRef(null); useClickOutside(formRef, () => setSearchOpen(false)); const [inputText, setInputText] = useState(""); const handleSubmit = e => { if (inputText.length >= 150) { alert('Maximum length 150 characters ') e.preventDefault(); } }; return ( <form ref={formRef} className={cn("search-form", { "search-form--focus": isSearchOpen, })} onClick={() => setSearchOpen(true)} onKeyPress={() => setSearchOpen(true)} action="/search" // eslint-disable-next-line role="searchbox" onSubmit={handleSubmit} > <input value={inputText} onChange={e => setInputText(e.target.value)} className="search-form__input" name="filter" type="text" /> <button className="search-form__button" type="submit" aria-label="Header search button" /> </form> ); };