кастомная радиокнопка, не доработана

src/pages/ContactFormPage/NewField/SwitchNewField.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import NewFieldParent from "./NewFieldParent";
 import {FormControlLabel, Switch} from "@mui/material";
 import SelectMask from "../SelectMask";
+import CustomSwitch from "@ui_kit/CustomSwitch";
 
 
 
@@ -29,7 +30,7 @@ export default function SwitchNewField({switchState ='name'}: Props) {
                 <NewFieldParent placeholderHelp={'Введите номер'} placeholderField={'+7 900 000 00 00'} defaultValue={'phone'}>
                     <FormControlLabel
                         value="start"
-                        control={<Switch color="primary" />}
+                        control={<CustomSwitch/>}
                         label="Маска для телефона"
                         labelPlacement="start"
                         sx={{

src/pages/InstallQuiz/VidjetInstall.tsx

@@ -16,6 +16,7 @@ import VidjetImg from "../../assets/VidjetImg.png"
 import SelectableButton from "../../components/CreateQuiz/SelectableButton";
 import LDownButton from "@icons/InstallQuizIcon/LDownButton";
 import RDownButton from "@icons/InstallQuizIcon/RDownButton";
+import CustomRadio from "@ui_kit/CustomRadio";
 
 
 
@@ -103,13 +104,13 @@ export default function VidjetInstall () {
                         <FormControlLabel
                             sx={{ color: theme.palette.grey2.main }}
                             value="1"
-                            control={<Radio />}
+                            control={<CustomRadio/>}
                             label="Да"
                         />
                         <FormControlLabel
                             sx={{ color: theme.palette.grey2.main }}
                             value="2"
-                            control={<Radio />}
+                            control={<CustomRadio />}
                             label="Нет"
                         />
                     </RadioGroup>

src/ui_kit/CustomRadio.tsx

@@ -0,0 +1,15 @@
+import {IconButton} from "@mui/material";
+import {useState} from "react";
+
+
+export default function CustomRadio () {
+    const [active, setActive] = useState<boolean>(false);
+    return (
+        <IconButton onClick={() => setActive(!active)}>
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect x="0.5" y="0.5" width="25" height="25" rx="12.5" fill={active ? "#7E2AEA" : "#F2F3F7"} stroke={active ? "#7E2AEA" : "#9A9AAF"}/>
+                <rect x="8" y="8" width="10" height="10" rx="5" fill={active ? "white" : "#F2F3F7"}/>
+            </svg>
+        </IconButton>
+    )
+}

src/ui_kit/CustomSwitch.tsx

@@ -5,7 +5,7 @@ import {useState} from "react";
 export default function CustomSwitch () {
     const [active, setActive] = useState<boolean>(false);
     return (
-        <IconButton disableRipple onClick={() => setActive(!active)}>
+        <IconButton onClick={() => setActive(!active)}>
             <svg width="52" height="30" viewBox="0 0 52 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <rect width="52" height="30" rx="15" fill={active ? "#7E2AEA" : "#9A9AAF"} />
                 <rect