How to avoid child use effect on navigation drawer open or close in React

Question

I have a state variable open in the Navigation drawer as layout and <outlet/> within it for the child components. I have a child component with an API call in useEffect(). Whenever the navigation drawer opens or closes, the child component useEffect is triggered, and hence the API call as well. But the child's API call has nothing to do with the Navigation Drawer. How can we avoid this? (In my case, when I open/close the drawer, ListBranches triggers the useEffect which is not related to the drawer open/close action)

Navigation Drawer Layout.tsx

<Drawer variant="permanent" open={open} ModalProps={{keepMounted: true}}>
    <DrawerHeader sx={{display: "flex"}}>
       <Typography variant={"h6"} component={"span"} sx={{flexGrow: 1}}>
          Logo
       </Typography>
       <IconButton onClick={handleDrawerClose}>
          {theme.direction === 'rtl' ? <ChevronRightIcon/> : <MenuIcon/>}
        </IconButton>
    </DrawerHeader>
    <Divider/>
       <List> //Sidenav items </List>
    </Drawer>
    <Box component="main" sx={{flexGrow: 1, paddingLeft: '25px', paddingRight: '25px'}}>
       <DrawerHeader/>
       <Outlet/>
    </Box>
</Drawer>

Child Component ListBranches.tsx

function ListBranches(props: IListBranchesProps) {

    // const loaderData = useLoaderData();
    const [branches, setBranches] = useState([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        refreshBranches();
    }, [])
   .....
   .....