diff --git a/frontend/frontend/src/components/CustomComponents.tsx b/frontend/frontend/src/components/CustomComponents.tsx
index 01599c77..09571153 100644
--- a/frontend/frontend/src/components/CustomComponents.tsx
+++ b/frontend/frontend/src/components/CustomComponents.tsx
@@ -104,6 +104,7 @@ export const Divider = ({ children, ...props }: CustomCardProps) => {
     )
 }
 
+
 interface EvenlySpacedRowProps {
     items: ReactNode[]
 }
diff --git a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
index e265a651..38707a4d 100644
--- a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
+++ b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
@@ -395,7 +395,7 @@ export function GroupsPage() {
     const [filteredStudents, setFilteredStudents] = useState(availableStudents)
 
     // for filtering students
-    const handleAutocompleteChange = (_, value) => {
+    const handleAutocompleteChange = (_: unknown, value: number | null) => {
         if (value) {
             setFilteredStudents([value])
         }
@@ -405,12 +405,14 @@ export function GroupsPage() {
         setFilteredStudents(availableStudents)
     }
 
-    const filterOptions = (_, { inputValue }) => {
-        const filtered = availableStudents.filter((option) => {
+    const filterOptions = (
+        _: unknown,
+        { inputValue }: { inputValue: string }
+    ) => {
+        return availableStudents.filter((option) => {
             const label = studentNames.get(option)
             return label?.toLowerCase().startsWith(inputValue.toLowerCase())
         })
-        return filtered
     }
     return (
         <>
@@ -751,11 +753,16 @@ export function GroupsPage() {
                                                                 }
                                                                 getOptionLabel={(
                                                                     student
-                                                                ) =>
-                                                                    studentNames.get(
-                                                                        student
-                                                                    )
-                                                                }
+                                                                ) => {
+                                                                    const name =
+                                                                        studentNames.get(
+                                                                            student
+                                                                        )
+                                                                    return name !=
+                                                                        null
+                                                                        ? name
+                                                                        : '' // This checks for both null and undefined
+                                                                }}
                                                                 onChange={
                                                                     handleAutocompleteChange
                                                                 }