how to upload and save image to local storage in react js?

I want to upload image and save it in local stage,in react js, but it works after first rerender, when I upload image it is not shown before refresh

    const App = () => {
    const [url, setUrl] =useState('');
        const uploader = (file) =>{
        const reader = new FileReader();
        reader.addEventListener('load', ()=>{
            localStorage.setItem('recent-image',reader.result)
        })
        reader.readAsDataURL(file);
    }
    useEffect(() => {
        setUrl(localStorage.getItem('recent-image'));
    }, [])
    return ( 
        <div>
            
            <img src ={url}/>
        </div>
     );
   }