FLOWBITEjs Drawer not working properly with placement left and bottom. in Reactjs

Question

Below is the code WrapperDrawer component that I've written. It works well with placements as 'right' and 'top'. But with 'left' and 'bottom' it just sits up there(shows) on just loading without setting the open flag to true. for some unknown reason it gets messed up tailwind classes too. But works awesome with 'top' and 'right' placements

type CustomDrawerPropsType = {
  id: string
  children: React.ReactNode
  isOpen: boolean
    setOpen?: (val: boolean) => void
    showCloseButton: boolean

}

const WrapperDrawer = (props: CustomDrawerPropsType & DrawerOptions) => {
  const targetEl = React.useRef(null)
    const DEFAULT_BACKDROP_STYLE = 'bg-gray-700/50 dark:bg-gray-900/80 fixed inset-0 z-30'
    const [drawer, setDrawer] = React.useState<DrawerInterface|null>(null)
  const options:DrawerOptions = {
    placement: props.placement ?? 'right',
    backdrop: props.backdrop ?? true,
    bodyScrolling: props.bodyScrolling ?? false,
    edge: props.edge ?? false,
    edgeOffset: props.edgeOffset ?? '',
    backdropClasses: props.backdropClasses ?? DEFAULT_BACKDROP_STYLE,
    onShow: props.onShow ?? (()=>{}) ,
    onToggle: props.onToggle ?? (()=>{}),
        onHide: props.onHide ?? (() => {}) 
  }
    
  const instanceOptions: InstanceOptions = {
    id: props.id,
    override: true
  }
  React.useEffect(() => {
    if (targetEl.current) {
      // Use targetEl.current for applying Flowbite's initialization logic
      setDrawer(prev => new Drawer(targetEl.current, options, instanceOptions))
    }
  }, [])

  React.useEffect(() => {
        if(drawer){
            if (props.isOpen) drawer.show()
            else drawer.hide()
        }
  },[props.isOpen, drawer])

    const styleDrawerByPlacement = ():string => {
        if(!props.placement)return ''
        if(['top','bottom'].includes(props.placement)) return 'h-3/5 w-screen'
        return 'w-3/5 h-screen'
    }

  return (
    <div
      id={props.id}
      ref={targetEl}
      className={`fixed z-40 overflow-y-auto bg-white dark:bg-gray-800 ${styleDrawerByPlacement()}`}
      // className="fixed z-40 w-3/5 h-screen overflow-y-auto bg-white dark:bg-gray-800"
      tabIndex={-1}
      aria-labelledby="drawer-js-label"
    >
      {props.showCloseButton && <button
        id="drawer-hide-button"
        type="button"
        aria-controls="drawer"
        className="absolute right-2.5 top-2.5 inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
                onClick={()=>{drawer?.hide()}}
      >
        <svg
          className="w-3 h-3"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 14 14"
        >
          <path
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
          />
        </svg>
        <span className="sr-only">Close menu</span>
      </button>}
      {props.children}
    </div>
  )
}

I've tried passing static tailwind classes as well thinking that might be the problem, but didn't work.