usememo and useeffect in customhooks - reactjs

Question

I've tried to use useMemo and useEffect in my custom hooks to prevent that from re-rendering ( doing cpu heavy job) which is parsing the JWT and returning the user permissions.
But it re-renders eveerytime that my menu items re-render and runs the usememo too.
Is there a way to avoid it from re-calculating ?
The code:
const usePermission = (controller?: string) => {
const [permoactions, setPermoactions] = React.useState([]);
const fetchPermoactions = () => {
try {
// parse jwt token and return permissions
} catch (error: any) {
throw new Error(error.message);
}
};
useMemo(() => {
fetchPermoactions();
console.count("memo");
}, [1]);
const access = React.useMemo(() => {
// make an permissions object tree
}, [permoactions]);
return controller ? access[controller] : access;
};
export default usePermission;
The usePermission hook is used in the pages where I need to validate for example if a user should see a button or have the ability to delete a line like this:
{permissions?.Create && (
<Grid item xs={2} sx={{ textAlign: "left" }}>
<Button
variant="contained"
onClick={handleAddClick}
endIcon={<AddIcon sx={{ marginRight: 2 }} />}
>
افزودن
</Button>
</Grid>
)}
It's also used in the sidebar to not show the menus that the user doesn't have access to like:
children = children.filter((child: any) => {
let AccessList: string[] = child.name.split(",");
let hasAccess = false;
AccessList.forEach((Access) => {
if (userAccess[Access]?.View) {
hasAccess = true;
} else {
hasAccess = false;
return;
}
return hasAccess && children;
});
return hasAccess ? child : null;
});