Reactjs mui spacing Stack and Grid

I used Stack, Divider Box and Grid, I am having trouble when spacing, please see the result below

<Stack direction="row"  spacing={1}>
  <Divider>
     <Box py={3} sx={{width: '100%', border: 1}}>
          <Stack
            direction="row"
            justifyContent="flex-end"
            alignItems="center"
            spacing={3}
            sx={{ marginBottom: '9px', width: 150 }}
          >

           <Grid container spacing={3} sx={{float: 'right'}} justify="flex-end">
                <Grid item xs sx={{float: 'right'}}>
                <LocalFireDepartmentIcon
                color={selectedThreat ? '#E01C1C' : 'disable'}
              />
                <Typography
                variant="subtitle2"
                sx={{ letterSpacing: '1.5px', marginLeft: '4px' }}
                className={classes.upperCase}
              >
                {name}
              </Typography>
                </Grid>
                <Grid item xs sx={{float: 'right'}}>
                <Typography
                variant="p"
                sx={{ letterSpacing: '1.5px', textDecoration: "underline", color: '#191F25', fontSize: '14px', lineHeight: '20px'  }}
                onClick={handleOpen}
              >
                Cancel
              </Typography>
                </Grid>
            </Grid>

          </Stack>
     </Box>
  </Divider>
</Stack>

Expected Result

current result

Don’t read this comment, I did this because I can submit question,
Don’t read this comment, I did this because I can submit question,
Don’t read this comment, I did this because I can submit question,
Don’t read this comment, I did this because I can submit question,