React bar position

Question

I've been struggling with this layout for two days and can't figure out how to implement it When I click on the button (the button is located in 1 block), then appears to the right bar (react drawer), which will be fixed when the user scrolls through the page (2 picture)

1 picture 2 picture

drawer: {
  zIndex: 999999,
  position: 'sticky',
  width: 200,
  '& .MuiBackdrop-root': {
    display: 'none',
  },
  '& .MuiDrawer-paper': {
    width: 200,
    backgroundColor: 'blue',
    position: 'absolute',
    top: 0,
    right: 0,
    height: '100vh',
  },
},
});
export const DrawerTest = () => {
const classes = useStyles();

return (
  <Drawer open="true" onClose="false" className={classes.drawer} variant="permanent" anchor="right">
    Drawer
  </Drawer>
);
}