Here's how you can get rid of this so that the "+" sign is always displayed, and not incomprehensible characters? I don’t know how you can write the code for it to work normally

   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>
   );
};