Persisting error state in react-query until successful refetch

    const { data, isLoading, isFetching, isError, refetch } = getUsers();

    if (isError) {
        return (
            <div className='border border-neutral-200 py-8 px-4 rounded-md text-center'>
                <div>
                    <Typography variant='base' as='h1' weight={500} className='text-black'>
                        Oh no, something went wrong!
                    </Typography>
                    <Typography variant='small' as='h1' weight={500} className='text-black'>
                        Sorry, we ran into an issue fetching the information. A quick retry might solve it.
                    </Typography>
                </div>
                <div className='mt-4'>
                    <Button impact='light' color='blue' onClick={() => refetch()} className='inline-flex px-4'>
                        {isFetching ? <Icon name='Loader' className='animate-spin' /> : 'Retry'}
                    </Button>
                </div>
            </div>
        );
    }