Fix toggle button toggling

Just use isSelected directly rather than makking the button have its
own state. Also, the isPressed from useToggleButton looks like its
whether the user has the mouse button down on it or not rather than
whether the toggle switch is on, which was making the state wrong.

src/input/Toggle.jsx

@@ -1,20 +1,21 @@
-import React, { useRef } from "react";
+import React, { useCallback, useRef } from "react";
 import styles from "./Toggle.module.css";
 import { useToggleButton } from "@react-aria/button";
-import { useToggleState } from "@react-stately/toggle";
 import classNames from "classnames";
 import { Field } from "./Input";
 
-export function Toggle({ id, label, className, ...rest }) {
+export function Toggle({ id, label, className, onChange, isSelected }) {
   const buttonRef = useRef();
-  const state = useToggleState(rest);
+  const toggle = useCallback(() => {
-  const { buttonProps, isPressed } = useToggleButton(rest, state, buttonRef);
+    onChange(!isSelected);
+  });
+  const { buttonProps } = useToggleButton({ isSelected }, { toggle }, buttonRef);
 
   return (
     <Field
       className={classNames(
         styles.toggle,
-        { [styles.on]: isPressed },
+        { [styles.on]: isSelected },
         className
       )}
     >
@@ -23,7 +24,7 @@ export function Toggle({ id, label, className, ...rest }) {
         ref={buttonRef}
         id={id}
         className={classNames(styles.button, {
-          [styles.isPressed]: isPressed,
+          [styles.isPressed]: isSelected,
         })}
       >
         <div className={styles.ball} />