javascript – ReactJS – Undesired rerender of parent component when child changes props

In InertiaJs using React, I have a Parent component which displays and animates several Childs (Child0, Child1, Child2 based on a tab variable (0, 1 or 2)

...
export default Parent = ({prop1, prop2, prop3, countries}) => {
    const [tab, setTab] = useState(0);
    ...

    return (
        <>
            {tab === 0 && }
            {tab === 1 && }
            {tab === 2 && }
        >
    );
}

Child components consist of forms that make changes to their respective parent props on save.

One of them, Child1 is internally calling InertiaJS router.reload inside useEffect, to lazy load countries information on a select when it mounts, like this:

useEffect(() => {
    ...
    router.reload({ only: ['countries'] });
}, [])

The problem arises when I hit the Tab 1 button in the UI, because it transitions from Tab 0 (default) to Tab 1 form, but then rapidly transitions back to the Tab 0 form. Parent is rerendered (as its props change because countries are being fetched on Child1mount).

How can I deal with this situation?
Or even better… Is there a better component distribution or technique to avoid this problem?

Thanks in advance.