Responsive mobile friendly country search with useContext theme switch

What are you most proud of, and what would you do differently next time?

1. I am most proud of spending time learning useContext. I converted my earlier code to then use theme values or data values that were available for all the child components.
2. I think I did a good job at learning how to put ion-icons inside input. It taught me about CSS positioning, which was a rusty area for me.
3. The site kept crashing for some corner cases like when there is no capital mentioned in the data for a particular country( or region). So I learned to account for those corder cases
4. Re-using the SingleCard component to make border countries clickable.
5. I learned how to use useRef to get to get the input value entered by user

What challenges did you encounter, and how did you overcome them?

I encountered a challenge while trying to put the ion-icon search inside the input. I thought z-index would help me but then I learned about positioning and used that to reach the correct point.

What specific areas of your project would you like help with?

1. I don't know (still) how to get rid of the icon when the user is typing. Or how to figure out that the user is entering the input and make "display: none". I have some idea, but this one I ended up not implementing.
2. I faced a hard time thinking about how I should make the search partial but also if there is an exact match then bring up only the exact match. I left it as partial (so it uses includes)
3. The design's color scheme baffled me, so I sort of figured it on the fly