Replace fake data in Research Projects components with real data

Goals

Replace the mock data in ResearchProjects.jsx, ResearchProjectsTable.jsx, and AdminAndSupportProjectsTable.jsx with real data from the backend API
Ensure that the components display accurate and up-to-date information for research projects and admin/support projects

[ ] Update ResearchProjects.jsx to fetch real data from the API instead of using the mock data from data.js
[ ] Modify ResearchProjectsTable.jsx to use the real data fetched from the API
[ ] Update AdminAndSupportProjectsTable.jsx to use real data for admin and support projects
[ ] Ensure that the data fetching is done efficiently, possibly using RTK Query
[ ] Update any filtering or sorting logic to work with the new data structure
[ ] Test the components with real data to ensure they function correctly
[ ] Update unit tests to work with the new data structure

The current implementation uses mock data from a data.js file, which needs to be replaced with real API calls
The existing components (ResearchProjects, ResearchProjectsTable, and AdminAndSupportProjectsTable) are already set up to display the data, so the main focus will be on replacing the data source
We may need to update the data structure if the API returns data in a different format than our current mock data