Update Styling System to Use sx Prop in Material-UI Components in styles.js

[93Belen]

Overview

Our project currently utilizes the makeStyles function for styling Material-UI components. However, with the updates in Material-UI version 5, it is recommended to transition to using the sx prop for styling.
Additionally, once we don't use the makeStyles function, we will be able to remove the mui/styles dependency, which has conflicts with React v.18 recently added to our project.
This GitHub issue is part of a series of Issues aiming to update the styling system in our project. In this issue, we are going to update Update Styling System to Use xs Prop in Material-UI Components in components/FoodSeeker/SearchResults/ResultsMap/styles.js

Action Items

• Replace HTML elements with Material Ui components
• Replace the existing makeStyles implementation with the xs prop for styling.
• Ensure that the changes do not impact the styling overrides in the theme folder.
• Make sure you don't lose accessibility when replacing semantic HTML for Material UI Components
• Attach screenshots of before and after in PR

Resources/Instructions
https://mui.com/material-ui/getting-started/overview/
https://mui.com/material-ui/migration/migration-v4/