How to fix issue with search bar

I have face issue with when a user inputs a value in the search bar and click the button it either throws an error in the console (Uncaught (in promise) SyntaxError: Unexpected token U in JSON at position 0) and the value passed to the handleSubmit is undefine,than try to create search using this script

Searchbar.js

const Navbar = ({ searchBarText, setSearchBarText }) => {
      
    
      function handleSubmit(e){
    
          console.log('submitted Value', e.target.value);
          setSearchBarText(e.target.value)
          e.preventDefault();
      }
      function keyPress(e){
        if(e.keyCode === 13 || e.key === 'Enter' ){
           console.log('value', e.target.value);
           setSearchBarText(e.target.value)
           // put the login here
           e.preventDefault();
        }
      }
    
    
      return (
            <>
            <nav className="navbar navbar-expand-lg navbar-light bg-light  ">
                    
              <form onSubmit={handleSubmit}>
                <div className="search-container" >
                 <span className="search-icon-btn">
                   <button className="search-icon-btn" type="submit"  onClick={handleSubmit} >
                    <i className="fa fa-search" value={searchBarText}></i>
                   </button>
               </span>
               <div className="search-input">
               <input 
                  type="text" 
                  className="search-bar" 
                  placeholder="Search...."
                  onKeyDown={keyPress}
            
               />
           </div>
         </div>

        </form> 
    
            </nav>  
            </>
          
        );
    
        
      }
      
    export default Navbar;