Devjobs web app built with reactjs and styled-components

I had a lot of fun building this project. I tried some new technologies in this project, like styled-components and Material-UI. I loved using styled-components; the most significant benefit I got from using it was maintaining my styles. It was a breeze finding the CSS that was affecting my components, and also, I could delete styles from one component, and it would not affect other components. Another benefit I got was automatic vendor prefixing, meaning I didn't have to worry about what my project would look like on other browsers.

Please give me feedback on:

• Accessibility
• HTML structure
• Loading state I'm using for react-query. Using it in these components:
  • Job: https://github.com/salymk/devjobs-web-app/blob/develop/src/components/Job/Job.js
  • Jobs: https://github.com/salymk/devjobs-web-app/blob/develop/src/components/Jobs/Jobs.js

Need help with:

• I'm using react-query to fetch data from data.json. One big challenge I have is showing 'No Jobs for [user input]' when users search for a job that does not exist.
  • I have a useJobs hook that I'm using to fetch the jobs, you can find it here: https://github.com/salymk/devjobs-web-app/blob/develop/src/hooks/useJobs.js
    • I need help with showing that message in this component: Jobs: https://github.com/salymk/devjobs-web-app/blob/develop/src/components/Jobs/Jobs.js