not sorted basket

src/components/Dropdown.tsx

@@ -54,6 +54,8 @@ export const Dropdown = forwardRef(({ open, input, handleCloseDropdown }: Dropdo
 
   const { courses, basket, addToBasket } = useContext(coursesContext)!;
 
+  const sortedCourses = courses.sort((a, b) => (a.name > b.name ? 1 : -1));
+
   useEffect(() => {
     console.log('wut');
   }, [open, input, handleCloseDropdown]);
@@ -69,7 +71,7 @@ export const Dropdown = forwardRef(({ open, input, handleCloseDropdown }: Dropdo
   useEffect(() => {
     const filterCourses = (input: string) => {
       const choosenCoursesNames = basket.map(({ name }) => name.trim());
-      const filteredCourses = courses.filter(
+      const filteredCourses = sortedCourses.filter(
         ({ name }) =>
           name
             .toLowerCase()

src/components/Rightbar.tsx

@@ -50,7 +50,18 @@ export const Rightbar = () => {
 
   const getBasketGroups = () => {
     const names = basket.map(({ name }) => name);
-    return courses.filter(({ name }) => names.includes(name));
+
+    const list = []
+
+    for (const basketName of names){
+        const course = courses.find(({name})=>basketName===name)!
+
+        list.push(course);
+    }
+
+    console.log("asdasdsa1", list);
+    console.log("asdasdsa2", courses.filter(({ name }) => names.includes(name)));
+    return list;
   };
 
   const filteredCourses = getBasketGroups();