IP Tracker built with React, useSWR hook, Tailwindcss

This project took me a few days to complete. I decided to step out of my comfort zone from building newbie and (a few) junior projects and jumped into my first intermediate level frontend project. It was challenging. I learned a lot more (though still much more to learn) about hooks, the useSWR hook by Vercel.

Since I'm using tailwindcss for my projects lately, I found it a bit hard to maintian and read CSS classes within the markup, that's why I took an approach to "abstract" CSS class names putting them separately in a Styles.js files using JS objects and arrays to access the required classes.

Disclaimer: My tech/developer/programmer language is still basic, meaning that I understand things by watching, trying, testing, and/or realizing, but I still have a hard time putting it in words, plus english is my second language.

In my first attempt using useSWR hook I found that data was fetching more than one time when I implemented it in a child component so I reestructured/refactored it in a way that it's only called on a upper component once (Main, where I pass props values from). Also, I since useSWR has an automatic revalidation I decided to disable it (by using useSWRImmutable instead of useSWR hook) because the IPIFY API I was working with offers limited requests for one-time-trial free user.

I have a question: is it good practice to use .env variables to load API keys? I am not sure about this - this is new land for me. But since you can load env variables in netlify I suppose is ok.

Any feedback is always appreciated. ^^