How to use useInvertedScale with the latest framer motion version in react js?

I use the useInvertedScale hook imported from [email protected] and it throws an error useInvertedScale is not imported with the latest version of framer-motion .

This is how I use it :

import React from "react";
import { motion, useInvertedScale } from "framer-motion";

export const Title = ({ title, category, isSelected }) => {
  const inverted = useInvertedScale();
  const x = isSelected ? 30 : 15;
  const y = x;

  const scaleTranslate = ({ x, y, scaleX, scaleY }) =>
    `scaleX(${scaleX}) scaleY(${scaleY}) translate(${x}, ${y}) translateZ(0)`;

  return (
    <motion.div
      initial={false}
      animate={{ x, y }}
      transition={
        isSelected
          ? { type: "spring", stiffness: 200, damping: 30 }
          : { type: "spring", stiffness: 300, damping: 35 }
      }
      transformTemplate={scaleTranslate}
      style={{
        ...inverted,
        originX: 0,
        originY: 0,
        position: "absolute",
        top: 0,
        left: 0,
        maxWidth: "300px",
      }}
    >
      <span
        style={{
          color: "#fff",
          fontSize: "14px",
          textAlign: "right",
          direction: "rtl",
        }}
      >
        {category}
      </span>
      <h2 style={{ textAlign: "right", direction: "rtl" }}>{title}</h2>
    </motion.div>
  );
};

What is the replacement for this hook with the new version or it just has been deleted ?

Solution 1:

useInvertedScale is renamed to useDeprecatedInvertedScale in older versions.