Styled Box - Copy this React, Mui Component to your project

Import FormAutoComplete from '@/components/calendar/components/filters/FormAutoComplete'; import useRoleAbility from '@/hooks/useRoleAbility'; import { Course } from '@/types/api/Course'; import { FilterModel } from '@epsilon informatique/lib nextjs stack/dist/types/filterModel'; import { yupResolver } from '@hookform/resolvers/yup/dist/yup'; import Grid from '@mui/material/Grid2'; import { Dispatch, SetStateAction, useEffect } from 'react'; import { useForm } from 'react hook form'; import { useTranslation } from 'react i18next'; import * as yup from 'yup'; type Props = { setFilterModel: Dispatch<SetStateAction<FilterModel>>; filterModel: FilterModel; setResetForm: Dispatch<SetStateAction<boolean>>; resetForm: boolean; handleResetCalendar: (value: boolean) => void; }; export default function CourseFilterComponent({ setFilterModel, filterModel, setResetForm, resetForm, handleResetCalendar, }: Props) { const { t } = useTranslation(); const { institute } = useRoleAbility(); const schema = yup.object({ label: yup.object(), }); const { control, watch, reset, formState: { errors }, } = useForm<Course>({ resolver: yupResolver(schema), }); //@ts ignore const course = watch('label') as Course; const handleClear = () => { const updatedFilterModel = filterModel.filter((item) => item.field !== 'internship.course.label'); setFilterModel(updatedFilterModel); handleResetCalendar(true); reset(); }; const resourceUri = institute ? `/api/institutes/${institute.id}/institute_courses` : '/api/courses'; const label = institute ? 'specificLabel' : 'label'; const field = institute ? 'internship.course.instituteCourse.specificLabel' : 'internship.course.label'; useEffect(() => { if (course && course.label) { setFilterModel([...filterModel, { field: field, value: course.label }]); setResetForm(false); } if (resetForm) { reset(); setFilterModel([]); handleResetCalendar(true); } // eslint disable next line react hooks/exhaustive deps }, [course, reset, resetForm, setFilterModel, setResetForm]); return ( <Grid size={12}> <FormAutoComplete<Course> nameField="label" labelField={t('components.calendar.components.filters.filterByCourse')} resourceUri={resourceUri} errorField={errors?.label} control={control} displayFields={{ format: '$1', values: [label] }} filterFields={['course']} sortField="course" required={false} onClear={handleClear} /> </Grid> ); }