react-spring transition is not showing when first time rendering

[mehdad-hussain]

I am using React-spring for first time. I am trying to use transition hook on a side drawer on my page by toggling a button. But when I am clicking on that button there is no animation as that side drawer opens instantly, but if I click second time then side drawer is closing with animation. And also if I click that button before that drawer removed from DOM then slide from left animation is there. I can't figure it out where is the problem. Help me please. Thanks. Here is my code:

import React, { useState } from "react";
import { useTransition, animated, config } from "react-spring";


const Transform = (props) => {

  const myStyle = {
    position: "fixed",
    left: 0,
    top: 0,
    zIndex: 100,
    backgroundColor: "black",
  };

  const [drawerIsOpen, setDrawerState] = useState(false);


  const closeDrawerHandler = () => {
    setDrawerState((v) => !v);
  };

  const transition = useTransition(drawerIsOpen, {
    form: { transform: "translateX(-100%)", opacity: 0 },
    enter: { transform: "translateX(0%)", opacity: 1 },
    leave: { transform: "translateX(-100%)", opacity: 0 },
    config: { duration: 2000 },
    // config: config.molasses,
    // openDrawerHandler: () => setDrawerState(true),
  });

  return (
    <>
      {transition((style, item) =>
        item ? (
          <animated.aside
            className='bg-white h-100 w-70 shadow'
            style={{ ...style, ...myStyle }}
            onClick={closeDrawerHandler}
          >
            <nav className='h-100'>
              <h2>It's a Side Drawer</h2>
            </nav>
          </animated.aside>
        ) : (
          ""
        )
      )}


      <div className='d-flex justify-content-end'>
        <button className='btn btn-primary ' onClick={closeDrawerHandler}>
          Toggle Btn
        </button>
      </div>
    </>
  );
};

export default Transform;

[mehdad-hussain]

Is this problem occurring for mounting and unmounting

in DOM ?
As this is jumping to key point after it is being added in DOM ?

[joshuaellis]

you spelt from as form?

[mehdad-hussain]

Problem solved. Thanks a lot for your time. And silly me :( . Wasting lot of time.
How to change this question to answered one ?