Mui popover'children well positionned but popover goes left - material-ui

Question

I am trying to do a custom mui popover. My custom popover's children are set on the right place but the popover component it self is placed on top left of the screen.
I use forward ref to pass the initial ref to children to two neested level.
I have a Navbar that contains a button to witch i attach the ref, a second component that is my customPopover, in my customPopover it returns a popover containing children passed by customPopover: the code of my CustomPopover:
<AppPopoverArrow
open={open}
ref={ref}
placement={"bottom-end"}
>
<Card className={classes.card}>
<CardHeader
sx={{marginBottom: "20px"}}
title={<Typography sx={{marginBottom: "5px"}} variant="subtitle1">Add a new collaborator</Typography>}
subheader={ <Typography variant="subtitle2">Please enter the email adress to receive the invitation</Typography>
}
/>
<CardContent className={classes.cardContent}>
<TextField sx={{height: 35, width: 320, marginBottom: "20px"}} placeholder="Email" onKeyDown={e => addAdress(e)}/>
{ adresses && <Typography variant="subtitle1" sx={{marginBottom: "15px"}}>{adresses.length} emails adresses added</Typography>}
{ adresses && adresses.map((email: string) => <Typography variant="subtitle2">{email}</Typography>) }
</CardContent>
<div className={classes.cardActionsArea}>
<CardActions>
<CustomButton onClick={onClose} color="secondary">
Cancel
</CustomButton>
<CustomButton onClick={onAddUser} variant="contained" color="primary" disabled={!adresses}>
Add
</CustomButton>
</CardActions>
</div>
</Card>
</AppPopoverArrow>