How to set element to height 0px? - css

Question

I want to make my element dynamically change its height from initial to 0px but it seems to be not working because of padding. I cannot say what I am doing wrong.
I do not want use: display: block or visibility hidden. I do not want to remove padding from styles when height is 0 because it makes this logic too complicated. I hope that I am doing sth stupid and easy to fix here and it is why it is not working. Any ideas?
I am adding it for more context. It is React. I've simplified code - but it is basic idea. And I want to make this modal resizable. So I have :
const StyledModal = styled.div<ModalProps>`
box-sizing: border-box;
position: fixed;
z-index: 9000;
background-color: white;
height: ${({ height }) => `${height}px`};
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
padding: 3.4rem 0 3.2rem 0;
`
const Modal = ({children}) => {
const [height, setHeight] = useState(0)
useEffect(() => {
setHeight(ref &&
ref.current &&
ref.current.getBoundingClientRect().height)
}, [])
const reduceHeight = () => setHeight(0)
return <StyledModal
onClick={reduceHeight}
height={height}>{children}</StyledModal>
}
Problem is that even if I manually set height to 0px in web developer tools , this element exists because of this padding like in the screenshot above.