ReduxとReact Hooksでfirebaseにアクセスしようとすると無限ループが呼ばれてしまう

Question

React初心者です。
現在Reduxにユーザーのログイン情報の管理を任せようと考えていて
以下のようなコードを作成しました。

しかし、HooksからReduxを叩くとRangeError: Maximum call stack size exceededと出てきて無限ループが発生してしまいます。
その次はdispatchを外してそのままuserSliceにあるloginを叩いてみたりもしたのですが、その場合は無限ループは発生しないものの、サインインの情報も取得できませんでした。

おそらくuseEffectとfetchUserStateで無限ループが発生していると思われるのですが、解決方法がわかりません。

どうすれば無限ループを発生させないようにできるでしょうか？

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { AppThunk, RootState } from '../../app/store';
import { LoginState } from '../../components/functions';
import fb from "../../components/fbInitializer";

const initialState : LoginState = {
    user:undefined
}

export const userSlice = createSlice({
    name:'user',
    initialState,
    reducers: {
        login: (user, action: PayloadAction<fb.User | null>)=>{
            user.user = action.payload;
        },
        logout: user => user.user = undefined
    }
})
export const { login, logout } = userSlice.actions;

export const signInAsync = () => {
    const provider = new fb.auth.GoogleAuthProvider();
    provider.addScope('profile');
    provider.addScope('email');
    fb.auth().signInWithPopup(provider);
}

export const signOutAsync = () : AppThunk => dispatch => {
    fb.auth().signOut().then(()=>{
        dispatch(logout());
    });
}

export const selectUser = (state:RootState) => state.user;
export default userSlice.reducer;

const TopPage : FC = () => {
    const dispatch = useDispatch();
    const fetchUserState = useCallback(
        () => {
            fb.auth().onAuthStateChanged(user => {
                dispatch(user ? login(user) : logout());
            })
        },
        [dispatch],
    )

    useEffect(() => {
        fetchUserState();
    }, [])
    
    return (
        <Router>
            <Switch>
                <Route exact path="/">
                    <Header />
                    <Grid alignItems="center" justify="center" container>
                        <Grid item xs={2}></Grid>
                        <Grid item xs={8}>
                            <ContentPage />
                        </Grid>
                        <Grid item xs={2}></Grid>
                    </Grid>
                </Route>
            </Switch>
        </Router>
    )
}
export default TopPage;