Scrolling to anchor tags using React Hooks (React Router, also working without router library)

Anchor.jsx

import React from "react"
import {Link} from "react-router-dom"
import { useScrollToView } from "./useScrollToView"
export default function Anchor() {
  useScrollToView()
  return (
    <div>
      <nav>
        <Link to="#about">About using React Router</Link>
        <a href="#about">About using html anchor tag</a>
      </nav>
      <div id="#about">About Page</div>
    </div>
  )
}

useScrollToView.js

import { useEffect } from "react"
import { useLocation } from "react-router-dom"
export function useScrollToView() {
  const { hash } = useLocation();
  /**
  if you dont react-router or any routing library
  const { hash } = window.location 
  */
  
  function scrollTo(hash) {
    if(hash) {
        const el = document.getElementById(el)
        if(el) {
          el.scrollIntoView({ end: 'block', behavior: 'smooth' })
        }
    }
  }
  
  useEffect(() => {
    scrollTo(hash)
  }, [])
  
  useEffect(() => {
    scrollTo(hash)
  }, [hash])
}