You want to set display: 'flex' and flexDirection: 'column' for column-direction elements placement inside your button:

dummyButton: {
    backgroundColor: 'green',
    display: 'flex',
    flexDirection: 'column'
  },

try To add A <br /> tag between image and div. This what I meant. This will help you https://codepen.io/ash_000001/pen/OJOQaGp?editors=1100

<Button className={classes.dummyButton}>
  <Image
   src="/buttonImage1.webp"
   alt="buttonimage1"
   width={48}
   height={48}
   />

<div>Dummy Button</div>
</Button>
Styles.js

dummyButton: {
    backgroundColor: 'green',
 
  },

I think you can put your image tag in another span and change its display to block.

Try this:

<Button className={classes.dummyButton}>
 <span className={classes.mySpan}>
  <Image
   src="/buttonImage1.webp"
   alt="buttonimage1"
   width={48}
   height={48}
   />
</span>
<div>Dummy Button</div>
</Button>

and your class styles should be like this:

.mySpan {
       display: 'block'
    }