I am trying to add some user experience with animations. The problem is the way I have my screen set up. Currently I don't render my sidebar when it's closed, and it looks great and it's responsive, but it seems that I cannot add animations because of the layout I've chosen. As conditionally rendered components don't seem to work with animations.

export default function Layout(props) {
  const [open, setOpen] = useState(false);
  const isMobile = useMediaQuery({ query: "(max-width: 768px)" });

  return (
    <div className="relative h-screen w-screen flex">
      
/// SIDEBAR
      {open && (
        <section className={"fixed top-0 left-0 bg-white h-screen z-20 w-64  md:relative md:w-1/3 delay-400 duration-500 ease-in-out transition-all transform  "
          + (open ? " translate-x-0 " : " translate-x-full ")}></section>
      )}

      {open && isMobile && (
        <div
          onClick={(ev) => {
            setOpen(false);
          }}
          className="fixed left-0 mt-0 bg-black bg-opacity-60 w-screen h-screen z-10"
        ></div>
      )}

      <div className="relative w-full h-full">
/// TOP BAR
        <div className="absolute top-0 h-16 w-full bg-blue-600  flex flex-row items-center p-2 z-5">
          <MenuIcon
            onClick={(ev) => {
              setOpen(!open);
            }}
            className="text-white"
            width={30}
            height={30}
          ></MenuIcon>
        </div>

/// CONTENT
        <div className="pt-16 h-full w-full overflow-y-auto">{props.children}</div>
      </div>
    </div>
  );
}

Tried using something like this delay-400 duration-500 ease-in-out transition-all transform " + (isOpen ? " translate-x-0 " : " translate-x-full ")

Is there a way to do appearing/ disappearing animations with my current setup or do I have to change the layout entirely?

This is how it currently looks like