How to use react-draggable with material-ui animations with react-transition group

Question

Trying to use react-draggable with material-UI animations.

One way is like this

        <Draggable>
          <Grow in={checked}>
            <Card className={clsx(classes.abs, classes.paper)}>
              <svg className={classes.svg}>
                <polygon
                  points="0,100 50,00, 100,100"
                  className={classes.polygon}
                />
              </svg>
            </Card>
          </Grow>
        </Draggable>

This way it mostly works fine however the drag animation lags.

Another way is to nest Draggable inside Grow

        <Grow in={checked}>
          <Draggable>
            <Card className={clsx(classes.paper)}>
              <svg className={classes.svg}>
                <polygon
                  points="0,100 50,00, 100,100"
                  className={classes.polygon}
                />
              </svg>
            </Card>
          </Draggable>
        </Grow>

In this case, dragging is smooth, however, the state is being messed up. The draggable component is visible at first, after toggling it goes away and never comes back.

Answer 1

Well turns out the solution is simpler than I thought.

First goes the Grow then put a div then the Draggable.

        <Grow in={checked}>
          <div>
            <Draggable>
              <Card className={clsx(classes.paper)}>
                <svg className={classes.svg}>
                  <polygon
                    points="0,100 50,00, 100,100"
                    className={classes.polygon}
                  />
                </svg>
              </Card>
            </Draggable>
          </div>
        </Grow>

Sometimes you just need to sleep.