我试图使一个自定义开关组件，但有一些小故障的效果时，动画播放。正如你所看到的一切似乎移动。

import React from "react";
import { clsx } from "@mantine/core";
import { motion } from "framer-motion";

type Props = {
  checked: boolean;
  onChange: () => void;
  labelChecked: string;
  labelUnchecked: string;
};

export const AppSwitch: React.FC<Props> = ({ checked, onChange, labelChecked, labelUnchecked }) => (
  <motion.div
    onClick={onChange}
    animate={{ backgroundColor: checked ? "#68A4F5" : "#70707015" }}
    className={clsx(
      "cursor-pointer select-none shadow-md inline-flex items-center rounded-xl p-0.5",
      checked ? "flex-row-reverse" : "flex-row",
    )}
  >
    <motion.div
      layout="position"
      className={clsx("pl-3 pr-2 uppercase font-semibold text-black")}
      style={{ fontSize: "clamp(10px, 12px, 14px)" }}
    >
      {checked ? labelChecked : labelUnchecked}
    </motion.div>
    <motion.div layout="position" className="w-6 h-6 bg-white rounded-full" />
  </motion.div>
);

此外，我试图在一个给定的空间缩放字体，似乎不工作。
谢谢