Shadcn Drawer component with Inputs on mobile, keyboard hides inputs or shows a blank space hiding them

Question

I have some forms in Drawer component from Shadcn, traying to type on the Inputs shows the keyboard and two strange thins can happen, the Inputs get hidden behind the keyboard or a blank spase appears inside the Drawer pushing the inputs way to the upper part, hiding them too.

I tried to control the height when showing the keyboard but it got even worse.

useEffect(() => {
    function onVisualViewportChange() {
        const visualViewportHeight = window.visualViewport.height;
        const keyboardHeight = window.innerHeight - visualViewportHeight;
        // Difference between window height and height excluding the keyboard
        const diffFromInitial = window.innerHeight - keyboardHeight;
        const drawerHeight = drawerRef.current.getBoundingClientRect().height || 0;
        drawerRef.current.style.height = `${visualViewportHeight - drawerHeight}px`;
        drawerRef.current.style.bottom = `${Math.max(diffFromInitial, 0)}px`;
    }
    
    window.visualViewport?.addEventListener("resize", onVisualViewportChange);
    
    return () =>
        window.visualViewport?.removeEventListener("resize", onVisualViewportChange);
 }, [])

<DrawerContent ref={drawerRef}>