Drawer = () => {
  const { state, setDrawer } = useContext(context);
  const [queue, setQueue] = useState([]);

  useEffect(() => {
    setQueue(q => {
      if (!state.open) return [];
      if (state.Component) return q.concat([state]);
      return q;
    });
  }, [state]);

  useEffect(() => {
    let t;
    if (queue.length > 1) {
      const [, ...rest] = queue;
      t = setTimeout(() => setQueue(rest), DURATION * 2);
    }

    return () => {
      if (t) clearTimeout(t);
    };
  }, [queue]);

  const onRequestClose = useCallback(() => setDrawer(), [setDrawer]);

  return (
    <SideDrawer
      isOpen={!!state.open}
      onRequestClose={onRequestClose}
      onRequestBack={state?.props?.onRequestBack}
      direction="left"
      {...state.options}
    >
      <>
        <TransitionGroup>
          {queue.map(({ Component, props }, index) => (
            <Transition
              timeout={{ appear: DURATION, enter: DURATION, exit: DURATION * 2 }}
              key={index}
            >
              {s => (
                <Bar state={s} index={index}>
                  <Component onClose={onRequestClose} {...props} />
                </Bar>
              )}
            </Transition>
          ))}
        </TransitionGroup>
      </>
    </SideDrawer>
  );
}
each device storage bar will grow of 0.5% if the space is available or just fill its given percent basis if the bar is filled