how to detect inactive user to auto logout

import { useEffect } from 'react';
import { useLogout } from "@refinedev/core";

const AutoLogout = () => {
    const { mutate: logout } = useLogout();

    useEffect(() => {
        const timer = setTimeout(() => {
            logout();
        }, 10000); // 10 seconds

        return () => clearTimeout(timer); // This will clear Timeout when component unmount (like componentWillUnmount)
    }, []);

    return null;
};

import { useEffect, useRef } from 'react';
import { useLogout } from "@refinedev/core";

const AutoLogout = () => {
    const { mutate: logout } = useLogout();
    const timerRef = useRef(null);

    const resetTimer = () => {
        if (timerRef.current) {
            clearTimeout(timerRef.current);
        }

        timerRef.current = setTimeout(() => {
            logout();
        }, 10000); // 10 seconds
    };

    useEffect(() => {
        // Start the timer when the component mounts
        resetTimer();

        // Setup event listeners
        window.addEventListener('mousemove', resetTimer);
        window.addEventListener('keydown', resetTimer);
        window.addEventListener('click', resetTimer);

        return () => {
            // Clear the timer when the component unmounts
            if (timerRef.current) {
                clearTimeout(timerRef.current);
            }

            // Cleanup event listeners
            window.removeEventListener('mousemove', resetTimer);
            window.removeEventListener('keydown', resetTimer);
            window.removeEventListener('click', resetTimer);
        };
    }, []);

    return null;
};

import React from 'react';
import { Admin } from '@refinedev/core';
import AutoLogout from './AutoLogout'; // assuming you've defined AutoLogout in a separate file

const App = () => {
    return (
        <Admin authProvider={authProvider} dataProvider={dataProvider}>
            <AutoLogout />
            {/* rest of your app */}
        </Admin>
    );
};

export default App;