**我需要在 javascript 文件中使用此directionLeft。当前在 typescript 文件中。我需要知道如何在JSX文件中传递这些属性。 请帮助我完成此操作。

import React from "react";
    import { motion } from "framer-motion";
    import image from "../public/img/me.jpg";
    import Image from "next/image";
    
    type props = {
        directionLeft?: Boolean;
    }
    
    function Skill({directionLeft}: props) {
      return (
        <div className="group relative flex cursor-pointer">
          <motion.div
            initial={{
              x: directionLeft ? -200 : 200,
              opacity: 0,
            }}
            transition={{ duration: 1 }}
            whileInView={{
              opacity: 1,
              x: 0,
            }}
          >
            <Image
              src={image}
              className="rounded-full border"/>
          </motion.div>
        </div>
      );
    }
    
    export default Skill;