material-ui-image | Material style image with loading animation | User Interface library

This is Header.js where I have a button (The React Symbol) when you click it, it will change the page theme. When you hover it has a popover where it declares the function of the button. Why is my button disabled (I can't click it anymore) while I have this feature?

I'm building a login Component in React, and trying to add the brand image. When I do this, I'm getting a huge amount of white space underneath it.

I've been working on this for a bit now, and I've discovered that, when I look in the dev tools, I can make headway by modifying this mysterious div that seems to be created by Material-UI, the front-end framework I'm using.

When I look into this in the dev tools, I find that there's a div with the attribute padding-top: calc(100%) which, when modified to something like padding-top: calc(30%), reduces the size of this whitespace underneath the image.

I've also tried some of the basic layout solutions suggested in many of the answers to similar questions here on SO, but none of them make a difference. It seems that this padding issue is at the heart of the problem.

Because I don't know what's creating this div, I'm not able to override the padding to work towards a solution. I've tried modifying paddingTop and padding with the !important tag in the styling of both the image, and the parent element of the image.

Code Sample

it does not render DOM show error I can give my source code If it can help to solve the problem more easily

package.json

I have an image gallery which will be displayed as grid, but when i click on that image i need a dialogue box with that image and text fields with image title and author..

here is my code

https://codesandbox.io/s/github/logeshhy/Material-UI-ImageGallery