How to use the emotion-theming.useTheme function in emotion-theming

const Container = ({ className, size, ...opts }) => {
  const theme = useTheme();

  return (

export default function Editor(props: Props) {
  const {
    message,
    onChange: handleChange,
    files,
    onFilesChange: handleFilesChange,
    onAppearanceChange: handleAppearanceChange,
    webhookUrl,
    onWebhookUrlChange: handleWebhookUrlChange,
    webhook,
  } = props

  const theme = useTheme()

  const [sending, setSending] = useState(false)
  const sendMessage = async () => {
    if (sending) return
    setSending(true)

    try {
      await executeWebhook(webhookUrl, message, files)
    } catch (error) {
      console.error("Error executing webhook:", error)
    }

    setSending(false)
  }

  const clearAll = () => {

const ExampleFill = ({ as: Component, ...opts }) => {
  const theme = useTheme();

  return (
    
  );
};

const Text = ({ size, bold, italic, strike, noMargin, style, ...props }) => {
  const theme = useTheme();
  const { Text: NativeText } = useComponents();
  const styleProps = { size, bold, italic, strike, noMargin, style };
  return (
    
  );
};

useTheme() {
    return useTheme();
  }

({ as: Component, space, slant, className, ...opts }, ref) => {
    const theme = useTheme();

    return (

export default function InfoItem({ children, icon }) {
  const theme = useTheme();
  return (
    <div>
      {icon ? (
        <div>
          {React.cloneElement(icon, {</div></div>

const Skeleton = ({ as: Component, className, ...props }) => {
  const theme = useTheme();

  return (