How to use the framer-motion.motion.button function in framer-motion

import React, { useState, useEffect } from "react";
import styled, { createGlobalStyle } from "styled-components";
import { motion } from "framer-motion";

const ToggleDebugButton = styled(motion.button).attrs(() => ({
  drag: true,
  dragMomentum: false,
  whileHover: { scale: 1.05 },
}))<{ debug?: boolean }>`
  position: fixed;
  top: 20px;
  right: 20px;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: 5px;
  border: 2px solid orange;
  background: orange;
  color: #333;
  z-index: 5000;
`;