Facing Issue in Debouncing concept in react

import React,{useState} from 'react';

const app = () =>{
    const [inputValue,setInputValue] = useState();    

    const handleChange = (e)=>{
        setInputValue(e.target.value);
        console.log(inputValue);
    }

    const debounce =function (fn , d) {
        let timer;
        return function(){
            let context = this,
                args=arguments;
        clearTimeout(timer);
          timer = setTimeout(() =>{
              fn.apply(context,args)
          },d)      
        }
    }
    
    const betterFunction = debounce(handleChange, 300);
    
    return (
    <>
        <input type='text' value={inputValue} onChange={betterFunction}/>
        <div>{inputValue}</div>
    </>
    )
    
}

export default app;

In the above code, I’m unable to make any changes once enter anything in inputfield. Basically updating inputfield stuck. Please help with the reasoning and thanking you in advance.