I am getting the warning about React has detected a change in the order of Hooks called by Checkout

I did read https://reactjs.org/docs/hooks-rules.html and looks like my code meets the requirements

The warning:
screenshot from debbuger

Fragment of file with hooks:

  if (!token) {

    navigate.push(routes.login)

    return <Text>Redirect</Text>

  }



  const maximumDate = moment().add(1, 'year')

  const minimumDate = moment()

  const formattedToday = minimumDate.format('YYYY-MM-DD')



  const [paymentMethod, setPaymentMethod] = useState(paymentOptions[0].key)

  const [totalAmount, setTotalAmount] = useState(totalCartAmount)

  const [deliveryTime, setDeliveryTime] = useState(0)

  const [date, setDate] = useState(minimumDate)

  const [show, setShow] = useState(false)



  const validationSchema = yup.object().shape({

    couponCode: yup.string(),

    comments: yup.string(),

  })



  useEffect(() => {

    if (deliverySlots.length > 0) {

      setDeliveryTime(deliverySlots[0].id)

    }

  }, [deliverySlots])



  useEffect(() => {

    getDeliveryTimeSlots(country.id, formattedToday, error => {

      if (error) {

        console.log(error)

      }

    })

  }, [])

Full component code:
https://codesandbox.io/s/modest-lewin-4x9ss