React useEffect showing unnecessary dependency warning

Question

I created a custom hook inside a react function component .Inside the custom hook, I wanted to access some random date (stored inside a state 'data') which is also defined inside the function component so I used useEffect hook and provided the 'data' as a dependency. The code works just fine and I can also console log 'data' but the terminal showing "React Hook useEffect has an unnecessary dependency: 'data'" .

I tried removing 'data' from the dependency array, but then I can't console log 'data'. Anyone please explain me why useEffect showing this behavior inside custom hooks also I need to know if it is a right practice to create a custom hook inside a function component. Thank you

import './App.css';
import { useEffect, useState } from 'react'

function App() {
  const [data, setData] = useState()

  useEffect(() => {
    setData('some random data')
  }, [])

  const useData = () => {
    useEffect(() => {
      console.log(data)
    }, [data])
  }

  useData()

  return (
    <>
    </>
  )
}

export default App;