Lazy loading image

import { useEffect, useState } from 'react'

const useLazyImage = (src: string): useLazyImageProps => {
  const [sourceLoaded, setSourceLoaded] = useState<string | null>(
    null,
  )
  const [loading, setLoading] = useState<boolean>(true)

  useEffect(() => {
    const img = new Image()
    img.src = src
    img.onload = () => {
      setLoading(false)
      setSourceLoaded(src)
    }

    return () => {
      img.remove()
    }
  }, [src])

  return {
    loading,
    src: sourceLoaded,
  }
}

interface useLazyImageProps {
  loading: boolean
  src: null | string
}

export default useLazyImage