useEffect goes to cyclic dependency with Redux Toolkit

Tryed to render component using useEffect with "product" dependency but it goes cyclic dependency.

Tryed to use prev state but it doesn't help.

React don't gives any error, but useEffect send request every second. Component:

export const ProductPage = (props: any) => {
    const { product, isLoading, error } = useTypedSelector(state => state.Product)
    const dispatch = useTypedDispatch()
    const { id } = useParams()
    
    const prevProd = usePrevious(product)

    useEffect(() => { 
        if (prevProd !== product){dispatch(fetchProduct(Number(id)))}
    }, [product])
    return (
            <div>
                <div>{product.name}</div>
                <div>{product.id}</div>
                <div>{product.price}</div>
            </div>
    )
}

Async Thunk:

export const fetchProduct = createAsyncThunk(
    'product/fetch',
    async (id: number, thunkApi) => {
        try {
            const response = await productService.fetch(id)
            return response.data
        } catch (error: any) {
            return thunkApi.rejectWithValue(error.message)
        }
    }
)

Slice:

export const ProductSlice = createSlice({
    name: 'product',
    initialState,
    reducers: {},
    extraReducers: {
        [fetchProduct.fulfilled.type]: (state, action: PayloadAction<IProductData>) => {
            state.error = ''
            state.isLoading = false
            state.product = action.payload
        },

        [fetchProduct.pending.type]: (state) => {
            state.isLoading = true
        },

        [fetchProduct.rejected.type]: (state, action: PayloadAction<string>) => {
            state.isLoading = false
            state.error = action.payload
        },
    }
})

Explain please, why this problem occured and how resolve this?