[BUG] CSS Variables Cause Animation and Drag Functionality to Fail

Description:
I'm experiencing an issue where animations using CSS variables for the y property are causing unexpected behavior. When CSS variables are utilized within a motion.div element, the component jumps and drag functionality becomes unresponsive. This behavior does not occur when using hardcoded values.

Expected behavior:
The motion.div should smoothly animate to the position defined by the CSS variable and should allow for dragging along the 'y' axis without jumping or becoming unresponsive.

Troubleshooting Attempts:

Moved CSS variable definitions to global scope.
Provided fallback values within the Framer Motion animation calls.
Verified no CSS variable overrides exist.
Checked for browser compatibility and console errors.
Used browser developer tools to inspect the computed styles.

Code Sample:

import React, { useEffect } from "react";
import { motion, useAnimation, useDragControls } from "framer-motion";

export default function ExpandAnimation({ setItemState, children }: any) {
  const animationControls = useAnimation();
  const dragControls = useDragControls();

  useEffect(() => {
    animationControls.start({
      y: "var(--slide-to)",
      // y: "20%",
      transition: { duration: 0.3, type: "spring", bounce: 0.15 },
    });
  }, [animationControls]);

  let startY = 0;
  const handleDragStart = (e: any, info: any) => {
    startY = info.point.y;
    console.log(startY);
  };

  const handleDragEnd = (e: any, info: any) => {
    const threshold = 100;
    if (info.point.y - startY > threshold) {
      animationControls
        .start({
          y: "var(--slide-from)",
          // y: "120%",
          transition: { bounce: 0, duration: 0.2 },
        })
        .then(() => {
          setItemState(null);
          history.pushState(null, "", "/a");
        });
    } else {
      animationControls.start({ y: "var(--slide-to)" });
      // animationControls.start({ y: "20%" });
    }
  };

  return (
    <>
      <motion.div
        initial={{ y: "var(--slide-from)" }}
        // initial={{ y: "120%" }}
        animate={animationControls}
        drag="y"
        // dragConstraints={{ top: 133 }}
        dragElastic={0.0}
        dragControls={dragControls}
        dragListener={false}
        onDragStart={handleDragStart}
        onDragEnd={handleDragEnd}
        className="fixed z-10 h-4/5 w-full max-w-[450px] border-0 border-secondary-600  bg-primary-100  [--slide-from:120%] [--slide-to:20%] "
      >
        <div
          className=" flex h-24 w-full justify-center rounded-t-xl bg-gradient-to-r from-accent-300 to-accent-400 pt-6"
          onPointerDown={(e) => {
            console.log(e);
            dragControls.start(e);
          }}
          style={{ touchAction: "none" }}
        >
          <div className="h-2 w-11 rounded-xl bg-accent-100"></div>
        </div>
        {children}
      </motion.div>
    </>
  );
}

Environment:

Framer Motion version: 10.16.4
Next version: 14.0.1
React version: 18.2.0
TailwindCSS version: 5.2.2 (if it might be relevant)

Begin with the supplied ExpandAnimation reproduction using motion.div, CSS variables, animationControls, and dragControls, and reproduce it with the listed library versions. Compare the CSS-variable values with the hardcoded y values while testing animation and y-axis dragging; done means both paths animate smoothly and dragging remains responsive.