diff --git a/src/App.tsx b/src/App.tsx index 8739db9..9b16e11 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,7 +3,6 @@ import './App.css'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; import PatientForm from './Components/PatientForm/PatientForm'; -import PatientDetails from './Components/PatientDetails/PatientDetails'; function App() { const queryClient = new QueryClient(); diff --git a/src/Components/PatientDetails/FamilyFormSection2.tsx b/src/Components/PatientDetails/FamilyFormSection2.tsx deleted file mode 100644 index 4f6a7f8..0000000 --- a/src/Components/PatientDetails/FamilyFormSection2.tsx +++ /dev/null @@ -1,185 +0,0 @@ -import { Button, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material'; -import { useFormik } from "formik"; -import * as yup from "yup"; -import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers'; - -interface FormValues { - maritalStatus: string; - numberOfChildren: string; - ages: string; - occupation: string; - hoursPerWeek: number | string; - employer: string; - businessPhone: string; - spouseName: string; - spouseEmployer: string; - spouseBusinessPhone: string; - emergencyContact: string; - relationship: string; - spousePhone: string; -} - -interface Props { - familyDetails: FormValues; -} - -export default function FamilyFormSection({familyDetails}:Props){ - return( - <> - - - - Marital Status - - } label="Married" /> - } label="Single" /> - } label="Widowed" /> - } label="Seperated" /> - } label="Divorced" /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - Spouse's Information: - - - - - - - - - - - - - - Emergency: - - - - - - - - - - - - - - - ) -}; diff --git a/src/Components/PatientDetails/MedicalHistorySection3.tsx b/src/Components/PatientDetails/MedicalHistorySection3.tsx deleted file mode 100644 index fdd49b2..0000000 --- a/src/Components/PatientDetails/MedicalHistorySection3.tsx +++ /dev/null @@ -1,165 +0,0 @@ -import * as React from 'react'; -import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material'; -import { useFormik } from 'formik'; -import * as Yup from 'yup'; - -interface FormValues { - physicianname: string; - physiciancity: string; - physicianstate: string; - physicianphone: string; - chiropractorName: string; - chiropractorState: string; - xray: boolean; - ctScan: boolean; - cdImages: boolean; - visitDetails: string; - cellPhoneProvider: string; -} - -interface Props { - medicalHistory: FormValues; -} - -export default function MedicalHistoryForm({medicalHistory}:Props){ - return( - <> - - Physician Hisory Information: - - - - - - - - - - - - - - - - - - - - - Chiropractor Information: - - - - - Previous Chiropractic Care: - - } label="Yes" /> - } label="No" /> - - - - - - - - - - - - - - - - Have you had an X-ray/CT Scan within the last 12 months? If yes, did you bring the CD of images for the doctor to review? - - } label="Yes" /> - } label="No" /> - - - - - - - Who can we thank for referring you to our office: - - } label="Friend" /> - } label="Relative" /> - } label="Physician" /> - } label="Instagram" /> - } label="Google" /> - } label="Others" /> - - - - - - - How do you prefer to be reminded of your appointments? - - } label="Email" /> - } label="Text" /> - - - - - )} - \ No newline at end of file diff --git a/src/Components/PatientDetails/OtherDetails8.tsx b/src/Components/PatientDetails/OtherDetails8.tsx deleted file mode 100644 index 18513d0..0000000 --- a/src/Components/PatientDetails/OtherDetails8.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import { Grid, FormLabel, TextField, FormControl, RadioGroup, FormControlLabel, Radio } from "@mui/material"; -import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; -import React from "react"; -import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers'; -import dayjs from "dayjs"; - -interface FormValues { - familyHistory: string; - sleep: string; - pillow:string; - orthotics:string; - brestExam: any; - pregnancy:string; - menstralCycle: any; - } - -export default function OtherDetails8(){ - - return( - <> - - - Family history and health status:

- -
- - - - How do you sleep? - - } label="Back" /> - } label="Side" /> - } label="Stomach" /> - - - - - - - Do you use a pillow? - - } label="Yes" /> - } label="No" /> - - - - - - - Do you wear orthotics or arch support? - - } label="Yes" /> - } label="No" /> - - - - - - Date of last gynecological and brest exam?

- - - -
- - {/* - For X-Ray purposes: - */} - - - - Possible pregnancy? - - } label="Yes" /> - } label="No" /> - - - - - - Date of last menstrual cycle?

- - - -
- - -
- - ) -} \ No newline at end of file diff --git a/src/Components/PatientDetails/PainAnalysisSection4.tsx b/src/Components/PatientDetails/PainAnalysisSection4.tsx deleted file mode 100644 index 0ecfca1..0000000 --- a/src/Components/PatientDetails/PainAnalysisSection4.tsx +++ /dev/null @@ -1,219 +0,0 @@ -import * as React from 'react'; -import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material'; -import { useFormik } from 'formik'; -import * as Yup from 'yup'; - -interface FormValues { - chiefComplaint:string; - painQuality: string[]; - painDuration: string; - currentTreatment: string; - treatmentResults: string; - treatmentGoal: string; -} -interface Props { - painAnalysis: FormValues; - } - -export default function PainAnalysisSection4({painAnalysis}:Props){ - return( - <> - - Issue Details: - - - - - - - - - What makes your pain worse? - - } - label="Bending" - /> - } - label="Standing" - /> - } - label="Sitting" - /> - } - label="Walking" - /> - } - label="Others" - /> - - - - - - - What makes your pain better? - - } - label="laying down" - /> - } - label="Standing" - /> - } - label="Sitting" - /> - } - label="Walking" - /> - } - label="Others" - /> - - - - - - - What is the quality of your pain? - - } - label="Sharp" - /> - } - label="Dull/Ache" - /> - } - label="Throbbing" - /> - } - label="Tingling/Numbness/Burning" - /> - } - label="Others" - /> - - - - - - - What is the worst time for your pain? - - } - label="Morning" - /> - } - label="During day" - /> - } - label="Evening" - /> - } - label="Lying in bed" - /> - } - label="Others" - /> - - - - - - - How much of the day do you experience your chief complaint? - - } label="0-25%" /> - } label="25-50%" /> - } label="50-75%" /> - } label="75-100%" /> - - - - - - - Has your current complaint caused any of the following? - - } - label="Muscle weakness" - /> - } - label="Bowel/Bladder problem" - /> - } - label="Digestion" - /> - } - label="Cardiac/Respiratory" - /> - - - - - - - - Have you tried any self treatment (ex-ice, heat, excercise) or taken any medication(over the counter or prescription)? - - } label="Yes" /> - } label="No" /> - - - - - - Expected Treatment Result: - - - - - - - - - )} - \ No newline at end of file diff --git a/src/Components/PatientDetails/PastTreatment5.tsx b/src/Components/PatientDetails/PastTreatment5.tsx deleted file mode 100644 index c863f6e..0000000 --- a/src/Components/PatientDetails/PastTreatment5.tsx +++ /dev/null @@ -1,170 +0,0 @@ -import { TextField, FormControlLabel,Grid,Checkbox, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material'; -import * as React from 'react'; -import Table from '../Helper/AddNewTable'; - -interface FormValues { - generalHealth: string; - presentProblemBefore: string; - ifYespresentProblemBefore:string; - ifYestreatmentProvided: string; - ifYesOutcome: string; - strokeBloodclotting: string; - ifYesstrokeBloodclotting: string; - dizzinessFetigue: string; - ifyesdizzinessFetigue: string; - antiColligent: string; - injuriesHospitalization: string; - supplementsOrDrugs: string; -} - -interface Props { - pastTreatement: FormValues -} - - -export default function PastTreatment5({pastTreatement}: Props){ - return( - <> -
- - - - - Overall your General Healgth is: - - } label="Excellent" /> - } label="Very Good" /> - } label="Good" /> - } label="Fair" /> - } label="Poor" /> - - - - - - - Have you experienced your present problem before? - - } label="Yes" /> - } label="No" /> - - - - - - - - - - - - - - - - - - - Have you ever had a stroke or issues with blood clotting? - - } label="Yes" /> - } label="No" /> - - - - - - - - - - - Have you recently experienced dizziness, unexplained fatigue, weight loss or blood loss? - - } label="Yes" /> - } label="No" /> - - - - - - - - - - - Are you currently taking anti-coagulant or blood thinning medication? - - } label="Yes" /> - } label="No" /> - - - - - - - Have you ever had any major illness, injuries, hospitalization or surgeries? - - } label="Yes" /> - } label="No" /> - - - - - - - - - - Please list current supplements or drugs you may be taking: - - - - - - - ) -} \ No newline at end of file diff --git a/src/Components/PatientDetails/PatientDetails.tsx b/src/Components/PatientDetails/PatientDetails.tsx deleted file mode 100644 index 437f195..0000000 --- a/src/Components/PatientDetails/PatientDetails.tsx +++ /dev/null @@ -1,335 +0,0 @@ -import * as React from 'react'; -import Typography from '@mui/material/Typography'; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -import Footer from "../Footer"; -import Header from "../Header"; -import {Button, Checkbox, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material'; -import PersonalSection from './PersonalSection1'; -import { styled } from '@mui/material/styles'; -import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp'; -import MuiAccordion, { AccordionProps } from '@mui/material/Accordion'; -import MuiAccordionSummary, { - AccordionSummaryProps, -} from '@mui/material/AccordionSummary'; -import MuiAccordionDetails from '@mui/material/AccordionDetails'; -import MedicalHistory from './MedicalHistorySection3'; -import FamilyFormSection from './FamilyFormSection2'; -import PainAnalysisSection4 from './PainAnalysisSection4'; -import PastTreatment5 from './PastTreatment5'; -import SystemReviewSection6 from './SyestemReviewSection6'; -import RecreationalHobbiesSection7 from './RecreationalHobbiesSection7'; -import OtherDetails8 from './OtherDetails8'; -import PatientImageMarker from '../ImageMarker/PatientImageMarker'; -import ViewPatientImageMarker from '../ImageMarker/ViewPatientImageMarker'; - -interface Patient { - fullName: string; - homePhone: string; - cellPhone: string; - email: string; - age: number; - dateOfBirth: string; - socialSecurityNumber: string; - mailingAddress: string; - city: string; - state: string; - zipCode: string; - gender: string; - maritalStatus: string; - } - - const personalData : Patient = { - fullName: "Vipeesh", - homePhone: "7259910917", - cellPhone: "7259910917", - email: "vipeesh191@gmail.com", - age: 33, - dateOfBirth: "27-4-1990", - socialSecurityNumber: "", - mailingAddress: "", - city: "Kannur", - state: "Kerala", - zipCode: "670643", - gender: "male", - maritalStatus: "", - } - - const familyData = { - maritalStatus:'', - numberOfChildren:'', - ages:'', - occupation:'', - hoursPerWeek:'', - employer:'', - businessPhone:'', - spouseName:'', - spouseEmployer:'', - spouseBusinessPhone:'', - emergencyContact:'', - relationship:'', - spousePhone:'' -} - -const medicalHstory = { - physicianname: '', - physiciancity: '', - physicianstate: '', - physicianphone: '', - chiropractorName: '', - chiropractorState: '', - xray: false, - ctScan: false, - cdImages: false, - visitDetails: '', - cellPhoneProvider: '', -} - -const painAnalysis = { - chiefComplaint:'', - painQuality:[], - painDuration:'', - currentTreatment:'', - treatmentResults:'', - treatmentGoal:'', -} - -const pastTreatement = { - generalHealth: '', - presentProblemBefore: '', - ifYespresentProblemBefore:'', - ifYestreatmentProvided:'', - ifYesOutcome:'', - strokeBloodclotting: '', - ifYesstrokeBloodclotting: '', - dizzinessFetigue: '', - ifyesdizzinessFetigue:'', - antiColligent: '', - injuriesHospitalization: '', - supplementsOrDrugs:'' - } - - const Accordion = styled((props: AccordionProps) => ( - - ))(({ theme }) => ({ - border: `1px solid ${theme.palette.divider}`, - '&:not(:last-child)': { - borderBottom: 0, - }, - '&:before': { - display: 'none', - }, - })); - - const AccordionSummary = styled((props: AccordionSummaryProps) => ( - } - {...props} - /> - ))(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' - ? 'rgba(255, 255, 255, .05)' - : 'rgba(0, 0, 0, .03)', - flexDirection: 'row-reverse', - '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': { - transform: 'rotate(90deg)', - }, - '& .MuiAccordionSummary-content': { - marginLeft: theme.spacing(1), - }, - })); - - const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({ - padding: theme.spacing(2), - borderTop: '1px solid rgba(0, 0, 0, .125)', - })); - -export default function PatientDetails(){ - const [expanded, setExpanded] = React.useState('panel1'); - const [isChecked, setIsChecked] = React.useState(false); - const [signature,setSignature]=React.useState(''); - - const [patient, setPatient] = React.useState({ - fullName: "", - homePhone: "", - cellPhone: "", - email: "", - age: 0, - dateOfBirth: "", - socialSecurityNumber: "", - mailingAddress: "", - city: "", - state: "", - zipCode: "", - gender: "", - maritalStatus: "", - }); - - const handleSubmit = (event: React.FormEvent) => { - event.preventDefault(); - }; - - const handleExpandChange = - (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => { - setExpanded(newExpanded ? panel : false); - }; - - const handleCheckboxChange = (event:any) => { - setIsChecked(event.target.checked); - }; - - //@ts-ignore - const patientData = localStorage.getItem('patientData') ? JSON.parse(localStorage.getItem('patientData')) : []; - - return( - <> - -
- -
- - Confidential Patient Information - - - - - } - aria-controls="panel1a-content" - id="panel1a-header" - > - Patient's Personal Information - - - - - - - - - - - Patient's Family Information - - - - - - - - - - Patient's Medical History Information - - - - - - - - - - Patient's Injury Image - - - - - - - - - - - Patient's Injury Details - - - - - - - - - - Patient's Past Treatment Details - - - - - - - - - - System Review Questions - - - - - - - - - - Recreational Activities/Hobbies Details - - - - - - - - - - Other Details - - - - - - - - - - - - } - label="I hereby state that all the information I have provided is complete and truthful and that I have fully disclosed my health history." - /> - - - - - { - setSignature(event.target.value) - }} - /> - - - - - - - - -
-
- - - ) -} \ No newline at end of file diff --git a/src/Components/PatientDetails/PersonalSection1.tsx b/src/Components/PatientDetails/PersonalSection1.tsx deleted file mode 100644 index fb39d9d..0000000 --- a/src/Components/PatientDetails/PersonalSection1.tsx +++ /dev/null @@ -1,170 +0,0 @@ -import * as React from 'react'; -import { Button, FormControl, FormControlLabel, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material'; -import { useFormik } from "formik"; -import * as yup from "yup"; -import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import PatientDetails from './PatientDetails'; - -interface Patient { - fullName: string; - homePhone: string; - cellPhone: string; - email: string; - age: number | string; - dateOfBirth: string; - socialSecurityNumber: string; - mailingAddress: string; - city: string; - state: string; - zipCode: string; - gender: string; - maritalStatus: string; -} - -interface Props { - personalData: Patient; -} - -export default function PersonalSection({personalData} : Props){ - return( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Gender - - } label="Male" checked={personalData.gender === 'male'} /> - } label="Female" checked={personalData.gender === 'female'} /> - - - - - - ) -} \ No newline at end of file diff --git a/src/Components/PatientDetails/RecreationalHobbiesSection7.tsx b/src/Components/PatientDetails/RecreationalHobbiesSection7.tsx deleted file mode 100644 index b757b11..0000000 --- a/src/Components/PatientDetails/RecreationalHobbiesSection7.tsx +++ /dev/null @@ -1,243 +0,0 @@ -import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material"; -import React from "react"; - -interface FormValues { - hobbies: string; - educationLevel: string; - excercise: string; - excerciseExplanation: string; - tobacco: string; - tobaccoExplanation: string; - alcohol: string; - alcoholExplanation: string; - healthyDiet: string; - healthyDietExplanation: string; - sleep: string; - sleepExplanation: string; - workSchool: string; - workSchoolExplanation: string; - familyLife: string; - familyLifeExplanation: string; - drugs: string; - drugsExplanation:string; - } - -export default function RecreationalHobbiesSection7(){ - return( - <> - - - - Recreational Activities/Hobbies:

- -
- - - - Your education level: - - } label="High School" /> - } label="Some college" /> - } label="College Graduate" /> - } label="Post college" /> - } label="Other" /> - - - - - - - Do you excercise? - - } label="Yes" /> - } label="No" /> - - - - - - - - - - - Use tobacco? - - } label="Yes" /> - } label="No" /> - - - - - - - - - - - Consume alcohol? - - } label="Yes" /> - } label="No" /> - - - - - - - - - - - Have a healthy diet? - - } label="Yes" /> - } label="No" /> - - - - - - - - - - - Get adequate sleep? - - } label="Yes" /> - } label="No" /> - - - - - - - - - - - Is Work/School stressful to you? - - } label="Yes" /> - } label="No" /> - - - - - - - - - - - Family life stressful to you? - - } label="Yes" /> - } label="No" /> - - - - - - - - - - - Use recreational drugs? - - } label="Yes" /> - } label="No" /> - - - - - - - -
- - ) -} \ No newline at end of file diff --git a/src/Components/PatientDetails/SyestemReviewSection6.tsx b/src/Components/PatientDetails/SyestemReviewSection6.tsx deleted file mode 100644 index 39077d3..0000000 --- a/src/Components/PatientDetails/SyestemReviewSection6.tsx +++ /dev/null @@ -1,237 +0,0 @@ -import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material"; -import React from "react"; - -interface FormValues { - eyes: string; - IntestinesBowls: string; - jointsBones:string; - allergies: string; - earsNoseMouth: string; - urinary: string; - skin: string; - psychological: string; - heart: string; - muscles: string; - internalOrgans: string; - gynecological: string; - lungsBreathing: string; - nerves: string; - blood: string; - prostate: string; - explanation:string; - } - -export default function SystemReviewSection6(){ - return( - <> - - Please choose body areas or systems where you may have problems: - - - - - Eyes - - } label="Yes" /> - } label="No" /> - - - - - - Intestines/Bowls - - } label="Yes" /> - } label="No" /> - - - - - - Joints/Bones - - } label="Yes" /> - } label="No" /> - - - - - - Allergies - - } label="Yes" /> - } label="No" /> - - - - - - Ears, Nose, Mouth, Throat - - } label="Yes" /> - } label="No" /> - - - - - - Urinary - - } label="Yes" /> - } label="No" /> - - - - - - Skin - - } label="Yes" /> - } label="No" /> - - - - - - Psychological/Emotional - - } label="Yes" /> - } label="No" /> - - - - - - Heart - - } label="Yes" /> - } label="No" /> - - - - - - Muscles - - } label="Yes" /> - } label="No" /> - - - - - - Internal Organs - - } label="Yes" /> - } label="No" /> - - - - - - Gynecological menstrual/Brest - - } label="Yes" /> - } label="No" /> - - - - - - - Lungs/Breathing - - } label="Yes" /> - } label="No" /> - - - - - - Nerves - - } label="Yes" /> - } label="No" /> - - - - - - Blood - - } label="Yes" /> - } label="No" /> - - - - - - Prostate/Testicular/Penile - - } label="Yes" /> - } label="No" /> - - - - - Please explain your check marks:

- -
- -
- - ) -} \ No newline at end of file diff --git a/src/Components/PatientForm/PersonalSection1.tsx b/src/Components/PatientForm/PersonalSection1.tsx index 624622a..44f9888 100644 --- a/src/Components/PatientForm/PersonalSection1.tsx +++ b/src/Components/PatientForm/PersonalSection1.tsx @@ -47,7 +47,7 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla homePhone: "", cellPhone: "", email: "", - age: 0, + age: "", dateOfBirth: birthDateValue, socialSecurityNumber: "", mailingAddress:"", @@ -80,8 +80,8 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla return( <> - - + @@ -104,6 +106,7 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla variant="outlined" label="Phone Number" name="cellPhone" + type="number" placeholder='Please enter your cell Phone number' value={type=='display'?patientDataDiplay.cellPhone:patient.cellPhone} disabled={type=='display'} @@ -113,9 +116,8 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla cellPhone: e.target.value, })); }} - // onBlur={formik.handleBlur} - // error={formik.touched.cellPhone && Boolean(formik.errors.cellPhone)} - // helperText={formik.touched.cellPhone && formik.errors.cellPhone} + error={!(/^\d{10}$/.test(patient.cellPhone))} + helperText={!(/^\d{10}$/.test(patient.cellPhone)) ? "Please enter a valid 10-digit phone number" : ""} /> @@ -124,6 +126,7 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla variant="outlined" label="Home Phone Number" name="homePhone" + type='number' placeholder='Please enter your home phone' value={type=='display'?patientDataDiplay.homePhone:patient.homePhone} disabled={type=='display'} @@ -133,9 +136,8 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla homePhone: e.target.value, })); }} - // onBlur={formik.handleBlur} - // error={formik.touched.homePhone && Boolean(formik.errors.homePhone)} - // helperText={formik.touched.homePhone && formik.errors.homePhone} + error={!(/^\d{10}$/.test(patient.homePhone))} + helperText={!(/^\d{10}$/.test(patient.homePhone)) ? "Please enter a valid 10-digit phone number" : ""} /> @@ -153,9 +155,8 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla email: e.target.value, })); }} - // onBlur={formik.handleBlur} - // error={formik.touched.email && Boolean(formik.errors.email)} - // helperText={formik.touched.email && formik.errors.email} + error={!(/^\S+@\S+\.\S+$/.test(patient.email))} + helperText={!(/^\S+@\S+\.\S+$/.test(patient.email)) ? "Please enter a valid email address" : ""} /> @@ -174,14 +175,14 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla age: e.target.value, })); }} - // onBlur={formik.handleBlur} - // error={formik.touched.age && Boolean(formik.errors.age)} - // helperText={formik.touched.age && formik.errors.age} + error={patient.age === ""} + helperText={patient.age === "" ? "Please enter your age" : ""} + /> + - + @@ -248,15 +249,11 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla state: e.target.value, })); }} - // onBlur={formik.handleBlur} - // error={formik.touched.state && Boolean(formik.errors.state)} - // helperText={formik.touched.state && formik.errors.state} />