text: import React from "react";
  import { withStyles } from "@material-ui/core/styles";
  import FormGroup from "@material-ui/core/FormGroup";
  import FormControlLabel from "@material-ui/core/FormControlLabel";
  import Switch from "@material-ui/core/Switch";
  
  const IOSSwitch = withStyles((theme) => ({
    root: {
      width: 42,
      height: 26,
      padding: 0,
      margin: theme.spacing(1),
    },
    switchBase: {
      padding: 1,
      "&$checked": {
        transform: "translateX(16px)",
        color: theme.palette.common.white,
        "& + $track": {
          backgroundColor: "#ff2a13",
          opacity: 1,
          border: "none",
        },
      },
      "&$focusVisible $thumb": {
        color: "#ff2a13",
        border: "6px solid #fff",
      },
    },
    thumb: {
      width: 24,
      height: 24,
    },
    track: {
      borderRadius: 26 / 2,
      border: `1px solid ${theme.palette.grey[500]}`,
      backgroundColor: theme.palette.grey[50],
      opacity: 1,
      transition: theme.transitions.create(["background-color", "border"]),
    },
    checked: {},
    focusVisible: {},
  }))(({ classes, ...props }) => {
    return (
      <Switch
        focusVisibleClassName={classes.focusVisible}
        disableRipple
        classes={{
          root: classes.root,
          switchBase: classes.switchBase,
          thumb: classes.thumb,
          track: classes.track,
          checked: classes.checked,
        }}
        {...props}
      />
    );
  });
  
  export default function ToggleButtonOff({ defaultValue, toggleValue }) {
    const [state, setState] = React.useState({
      checkedB: defaultValue,
    });
  
    const handleChange = (event) => {
      toggleValue(event.target.checked);
      setState({ ...state, [event.target.name]: event.target.checked });
    };
  
    return (
      <FormGroup>
        <FormControlLabel
          control={
            <IOSSwitch
              checked={defaultValue}
              onChange={handleChange}
              name="checkedB"
            />
          }
        />
      </FormGroup>
    );
  }
  