Inertia React and google analytics help

hi, im trying to implement google analytics with inertia but im getting duplicated events

when i hit "/home" google analytics receive the event normal -- but when i navigate to another page lets say "/collection" google receive another even for "/home" with the "/collection" ,so it the event i have now

-- 2 events "/home" should be only 1 event

--- 1 event'/collection'

this how i implemented it

//app.blade.php in header
 <script async src="{{'https://www.googletagmanager.com/gtag/js?id=' . config('settings')->google_analytics}}"></script>
                <script>
                    window.dataLayer = window.dataLayer || [];
                    function gtag(){dataLayer.push(arguments);}

                </script>
            @endif

and in Inertia layout component

 useEffect(() => {
        if (settings.google_analytics) {
            return Inertia.on('navigate', (event) => {
                gtag('js', new Date());

                gtag('config',settings.google_analytics);
            })
        }

    }, [])