Error: Can't perform a React state update on an unmounted component when child calls parent function

Question

We have a parent component which is passing a function to the child component. Here is code for parent component

....
const getChildUpdate = (name) => {
   console.log(name)
   setName(name)
}
return(
    <div>
        <ChildComponent callback={getChildUpdate} />
    </div>
)
....

In child component I want to call this call back function at the time component load and only once. Here is the code for the child component

....
useEffect(() => {
    callback('User Name')
}, [])
....

But when I execute, the callback function is called many times (not once) and I see below-mentioned issue

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

I can't figure out the route cause and a fix.