How to scroll to certain position in a list

In a React/ Material UI project, I have a scrollable list of users, (the number of users is dynamic) In each useEffect I want to place the scroll to the current user (I have the index of the current user in the database), I tried to calculate the number of pixels in each user element and then scroll to (number of pixels * user index) but this doesn't give me the result I want (especially that the number of pixels can change in each screen display)

this is my list :

   <Box style={{overflowY: "hidden",
     height: "35vh"}} className='scroll_users'>
    <List  component="nav" ref={scrollableListRef}>
        {users ? (users.map((user,i)=> (
        <div key={i} id={'ul'+i}>
            <ListItemButton
                selected={currentUserIndex === i}
              >
             <ListItemText primary={<Typography> {user.identifiant } </Typography> 
            }/>
            </ListItemButton>
        </div>
         ))) : null}
     </List>
   </Box>