fix: components with side-effects

## Description
It looks like some components' `render` functionality is not a function of props and state, but can have some side-effects on render.

Examples:
- [RatesStep](https://github.com/Automattic/woocommerce-services/blob/develop/client/extensions/woocommerce/woocommerce-services/views/shipping-label/label-purchase-modal/rates-step/index.js)
- Could call `props.updateRate` at each re-render

It is recommended to call functions that can have side effects in a `componentDidMount` or `componentDidUpdate` or `useEffect` method/hook.

Start with client/extensions/woocommerce/woocommerce-services/views/shipping-label/label-purchase-modal/rates-step/index.js and inspect its render path for calls such as props.updateRate. Search the other components for similar render-time side effects, then compare them with the componentDidMount, componentDidUpdate, or useEffect guidance. Done means identified side effects no longer run during render.

Written by the indexing model from the issue text.