switched to yarn:

src/components/App.tsx

@@ -1,6 +1,5 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import Topbar from './Topbar';
-import {Admin} from './Admin';
 import { Transfer } from './Transfer';
 import { Scheduler } from './Scheduler';
 import { Rightbar } from './Rightbar';
@@ -9,9 +8,9 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   display: flex;
   height: calc(100vh - 80px);
-  background-color: #ECEEF4;
-  padding-top:20px;
-  padding-bottom:20px;
+  background-color: #eceef4;
+  padding-top: 20px;
+  padding-bottom: 20px;
 `;
 
 export const App = () => {

src/components/Dropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect, MouseEvent } from 'react';
+import React, { useState, useContext, useEffect, MouseEvent, useMemo } from 'react';
 import { coursesContext } from '../contexts/CoursesProvider';
 import { Course } from '../types';
 import styled from 'styled-components';
@@ -47,9 +47,8 @@ interface DropdownProps {
 }
 
 export const Dropdown = ({ open, input, handleCloseDropdown }: DropdownProps) => {
-  const { courses, basket, addCourseToBasket } = useContext(coursesContext)!;
-  const basketNames = basket.map(({ name }) => name.trim());
-
+  const { courses, selectBasketNames, addCourseToBasket } = useContext(coursesContext)!;
+  const basketNames = useMemo(() => selectBasketNames(), [selectBasketNames]);
   const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]);
 
   const onCourseClick = (event: MouseEvent) => {
@@ -79,7 +78,7 @@ export const Dropdown = ({ open, input, handleCloseDropdown }: DropdownProps) =>
       setFilteredCourses(filteredCourses);
     };
     filterCourses(input);
-  }, [open, input, basket]);
+  }, [basketNames, courses, input]);
 
   return (
     <DropdownContainer>

src/components/Topbar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, MouseEvent, ChangeEvent, useEffect, useRef } from 'react';
+import React, { useState, MouseEvent, ChangeEvent, useEffect, useCallback } from 'react';
 import { ReactComponent as Close } from '../assets/close.svg';
 import ProfileIcon from '../assets/account.svg';
 import { Profile } from './Profile';
@@ -119,14 +119,11 @@ export default function ({ handleTransfer }: TopbarProps) {
 
   const handleCloseProfile = () => setAnchorEl(null);
 
-  const handleClearInput = () => setClearInput(!clearInput);
+  const handleClearInput = useCallback(() => setClearInput((clearInput) => !clearInput), []);
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
 
-  const handleShowDropdown = () => {
-    console.log('show dropdown');
-    setOpen(true);
-  };
+  const handleShowDropdown = () => setOpen(true);
 
   const handleCloseDropdown = () => setOpen(false);
 
@@ -135,14 +132,7 @@ export default function ({ handleTransfer }: TopbarProps) {
       setInput('');
       handleClearInput();
     }
-  }, [clearInput]);
-
-  // useEffect(() => {
-  //   console.log('input changed');
-  //   if (!open) {
-  //     setOpen(true);
-  //   }
-  // }, [input]);
+  }, [clearInput, handleClearInput]);
 
   return (
     <Topbar>