drawer sliding animation not working

import { useRef, useEffect } from "react";
import { Link } from "@remix-run/react";
import { Close } from "./icons";

interface DrawerProps {
    open: boolean
    onClose: () => void;
}

const Drawer = (props: DrawerProps) => {
    const { onClose, open } = props
    const ref = useRef<HTMLDivElement | null>(null)
    useEffect(() => {
        function handleClickOutside(event: Event) {
            if(ref.current && !ref.current.contains(event.currentTarget as Node) && event.target !== ref.current) {
                onClose()
            }
        }
        document.addEventListener('click', handleClickOutside, true)
        return () => document.removeEventListener('click', handleClickOutside, false)
    },[onClose])
    return (
        <div className='fixed inset-0 z-10'>
            <div className={`fixed inset-0 -z-[1] bg-black/50 ${open ? 'opacity-100' : 'opacity-0'} transition-opacity duration-300 ease-in`}></div>
            <div ref={ref} className={`fixed right-0 h-full w-3/4 p-4 bg-white ${open ? 'translate-x-0' : 'translate-x-full'} transition-transform duration-1000 ease-in delay-300`}>
                <button className="w-full p-4 mb-8 cursor-pointer"><Close className="h-[1.5em]" /></button>
                <div className="flex flex-col gap-4 p-4">
                    <Link to="/how-we-work" className="uppercase">how we work</Link>
                    <Link to="/about" className="uppercase">about</Link>
                    <Link to="/#services" className="uppercase">services</Link>
                    <Link to="/contact" className="uppercase">contact</Link>
                    <Link to="/blog" className="uppercase">blog</Link>
                    <Link to="/our-brands" className="uppercase">our brands</Link>
                </div>
            </div>
        </div>
    )
}

export default Drawer

import { useRef, useEffect } from "react";
import { Link } from "@remix-run/react";
import { Close } from "./icons";

interface DrawerProps {
    open: boolean
    onClose: () => void;
}

const Drawer = (props: DrawerProps) => {
    const { onClose, open } = props
    const ref = useRef<HTMLDivElement | null>(null)
    useEffect(() => {
        function handleClickOutside(event: Event) {
            if(ref.current && !ref.current.contains(event.currentTarget as Node) && event.target !== ref.current) {
                onClose()
            }
        }
        document.addEventListener('click', handleClickOutside, true)
        return () => document.removeEventListener('click', handleClickOutside, false)
    },[onClose])
    return (
        <div className='fixed inset-0 z-10'>
            <div className={`fixed inset-0 -z-[1] bg-black/50 ${open ? 'opacity-100' : 'opacity-0'} transition-opacity duration-300 ease-in`}></div>
            <div ref={ref} className={`fixed right-0 h-full w-3/4 p-4 bg-white ${open ? 'translate-x-0' : 'translate-x-full'} transition-transform duration-1000 ease-in delay-300`}>
                <button className="w-full p-4 mb-8 cursor-pointer"><Close className="h-[1.5em]" /></button>
                <div className="flex flex-col gap-4 p-4">
                    <Link to="/how-we-work" className="uppercase">how we work</Link>
                    <Link to="/about" className="uppercase">about</Link>
                    <Link to="/#services" className="uppercase">services</Link>
                    <Link to="/contact" className="uppercase">contact</Link>
                    <Link to="/blog" className="uppercase">blog</Link>
                    <Link to="/our-brands" className="uppercase">our brands</Link>
                </div>
            </div>
        </div>
    )
}

export default Drawer