Getting this Warning message in my browser console

Error: You should call navigate() in a React.useEffect(), not when your component is first rendered. I am getting this warning in my browser console every time as I am new to react I am not getting how to remove that warning message if any one can help I am thankful to them.

PaymentScreen.js :

import React, { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { savePaymentMethod } from '../actions/cartActions';
import CheckoutSteps from '../components/CheckoutSteps'

export default function PaymentScreen(props) {

    const history = useNavigate();
    const cart = useSelector((state) => state.cart);
    const {shippingAddress} = cart;
    if(!shippingAddress.address){
        history('/shipping');//getting console message for this line
    }

    const [paymentMethod, setPaymentMethod] = useState('Paypal');

    const dispatch = useDispatch();

    const submitHandler = (e)=>{
        e.preventDefault();
        dispatch(savePaymentMethod(paymentMethod));
        history('/placeorder');
    }
  return (
    <div>
        <CheckoutSteps step1 step2 step3></CheckoutSteps>
        <form className='form' onSubmit={submitHandler}>
            <div>
                <h1>Payment Method</h1>
            </div>
            <div>
                <div>
                    <input type="radio" id="paypal" value="PayPal" name ="paymentMethod" required checked onChange={(e)=> setPaymentMethod(e.target.value)}></input>
                    <label htmlFor='paypal'>PayPal</label>
                </div>
            </div>
            <div>
                <div>
                    <input type="radio" id="stripe" value="Stripe" name ="paymentMethod" required onChange={(e)=> setPaymentMethod(e.target.value)}></input>
                    <label htmlFor='stripe'>Stripe</label>
                </div>
            </div>
            <div>
                <button className='primary' type='submit'>Continue</button>
            </div>
        </form>
    </div>
  )
}

CartAction.js:

import Axios from "axios";
import { CART_ADD_ITEM, CART_REMOVE_ITEM, CART_SAVE_PAYMENT_METHOD, CART_SAVE_SHIPPING_ADDRESS } from "../constants/cartConstants";

export const addToCart = (productId,qty)=> async( dispatch, getState)=>{
    const {data} = await Axios.get(`/api/products/${productId}`);

    dispatch({
        type: CART_ADD_ITEM,
        payload: {
            name: data.name,
            image: data.image,
            price: data.price,
            countInStock: data.countInStock,
            product: data._id,
            qty,
        }
    });
    localStorage.setItem('cartItems', JSON.stringify(getState().cart.cartItems));
};


export const removeFromCart = (productId) => (dispatch,getstate) =>{
    dispatch({type : CART_REMOVE_ITEM, payload: productId});
    localStorage.setItem('cartItems', JSON.stringify(getstate().cart.cartItems))
}

export const saveShippingAddress=(data)=>(dispatch)=>{
    dispatch({type: CART_SAVE_SHIPPING_ADDRESS, payload : data});
    localStorage.setItem('shippingAddress',JSON.stringify(data));
}

export const savePaymentMethod=(data)=>(dispatch)=>{
    dispatch( {type : CART_SAVE_PAYMENT_METHOD, payload:data});
}