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();

src/contexts/CoursesProvider.tsx

@@ -125,7 +125,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
       const { data: courses } = await axios.get<Array<Course>>(
         `${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`,
       );
-      courses.sort((a, b) => (a.name > b.name ? 1 : -1));
       setCourses(courses);
     } catch (e) {
       console.log(e);