How to make react component call an axios HTTP request

Question

I am trying to make a section for my website with a news bar that contains snippets of update posts for my site. To do so, I have successfully created the data schema, routing on my backend for post and get requests. I am routing requests on the client server using axios for my XMLHTTPRequests, Redux for my global state store, and cors. Using my NewsBar component, I wrap my NewsPosts component, which is a collection of rendered NewsPost components.

NewsBar component:

function useQuery() {
    return new URLSearchParams(useLocation().search);
}

const NewsBar = () => {
    const classes = useStyles();
    const query = useQuery();
    const page = query.get('page') || 1;
    const searchQuery = query.get('searchQuery');
    
    const [currentId, setCurrentId] = useState(0);

    console.log(`NewsBar: ${useLocation().search} | query=>${query}`);
    console.log(`searchquery: ${searchQuery}`);
    
    return (
        <>
        <Grow in>
            <Grid container direction={'row'}  className={classes.newsBar} justifyContent='center'>
                <Typography variant='h3'>News Bar</Typography>
                <Grid item>
                    <NewsPosts setCurrentId={setCurrentId} />
                    
                </Grid>
            </Grid>
        </Grow>
        </>
    )
}

export default NewsBar;

NewsPosts component:

const NewsPosts = ({ setCurrentId }) => {
    const { newsPosts, isLoading } = useSelector((state) => state.newsPosts);
    const classes = useStyles();

    newsPosts.map((newsPost) => {
        console.log(newsPost);
    })
    
    console.log(new Date().toISOString());
    console.log(`newsPosts array: ${typeof newsPosts} ${newsPosts}`)
    if (!newsPosts.length && !isLoading) return 'No news posts.';
 

    return (
        isLoading ? <LinearProgress /> : (
            <Grid container alignItems='stretch' spacing={3}>
                {newsPosts?.map((newsPost) => (
                    
                    <Grid key={newsPost._id} item xs={12} sm={12} md={12} lg={12}>
                        <NewsPost newsPost={newsPost} setCurrentId={setCurrentId}/>
                    </Grid>
                ))}
            </Grid>
        )
    );
};

export default NewsPosts;

I added console logging for each of my routing actions and methods, and unfortunately it seems as though I get an empty array of type Object instead of the page of documents I am supposed to get. Within my console, the only logs that output are from NewsPosts.js.

NewsBar:  |  query=>
NewsBar.js:27 searchquery: null
NewsPosts.js:17 2022-12-01T20:36:08.958Z
NewsPosts.js:18 newsPosts array: object 

On top of that, I checked my network requests and none were made. Could someone attempt to tell me why this is?

Axios code as per request:

import { START_LOADING, END_LOADING, FETCH_POST, FETCH_ALL, DELETE, CREATE } from "../constants/actionTypes";
import * as api from '../api/index.js';

//CREATE ACTIONS -> should follow the standard XMLHTTPRequest operation

export const getNewsPost = (id) => async (dispatch) => {
    try {
        console.log('actions: action getNewsPost was called');

        dispatch({ type: START_LOADING })
        const { data } = await api.fetchNewsPost(id);
        dispatch({type: FETCH_POST, payload: { newsPost: data }});
        console.log(`got post ${data}`);
    } catch (error) {
        console.log(error);
    }
};

export const getNewsPosts = (page) => async (dispatch) => {
    try {
        console.log('actions: action getNewsPosts was called');

        dispatch({ type: START_LOADING });
        const {data : {data, currentPage, numberOfPages }} = await api.fetchNewsPosts(page);

        dispatch({ type: FETCH_ALL, payload: { data, currentPage, numberOfPages }});
        dispatch({ type: END_LOADING });
    } catch (error) {
        console.log(error);
    }
};

export const createNewsPost = (newsPost, history) => async (dispatch) => {
    try {
      console.log('actions: action createNewsPosts was called');

      dispatch({ type: START_LOADING });
      const { data } = await api.createNewsPost(newsPost);
  
      dispatch({ type: CREATE, payload: data });
  
      history.push(`/newsPosts/${data._id}`);
    } catch (error) {
      console.log(error);
    }
};

export const deleteNewsPost = (id) => async (dispatch) => {
    try {
      console.log('actions: action deleteNewsPost was called');

      await await api.deletePost(id);
  
      dispatch({ type: DELETE, payload: id });
    } catch (error) {
      console.log(error);
    }
};

index.js

import axios from 'axios';

const API = axios.create({ baseURL: 'http://localhost:5000' });

API.interceptors.request.use((req) => {
  if (localStorage.getItem('profile')) {
    req.headers.Authorization = `Bearer ${JSON.parse(localStorage.getItem('profile')).token}`;
  }

  return req;
});

export const fetchPost = (id) => API.get(`/posts/${id}`);
export const fetchPosts = (page) => API.get(`/posts?page=${page}`);
export const fetchPostsByCreator = (name) => API.get(`/posts/creator?name=${name}`);
export const fetchPostsBySearch = (searchQuery) => API.get(`/posts/search?searchQuery=${searchQuery.search || 'none'}&tags=${searchQuery.tags}`);
export const createPost = (newPost) => API.post('/posts', newPost);
export const likePost = (id) => API.patch(`/posts/${id}/likePost`);
export const comment = (value, id) => API.post(`/posts/${id}/commentPost`, { value });
export const updatePost = (id, updatedPost) => API.patch(`/posts/${id}`, updatedPost);
export const deletePost = (id) => API.delete(`/posts/${id}`);

export const signIn = (formData) => API.post('/user/signin', formData);
export const signUp = (formData) => API.post('/user/signup', formData);

export const fetchNewsPost = (id) => API.get(`/news/${id}`);
export const fetchNewsPosts = (page) => API.get(`/news?page=${page}`);
export const createNewsPost = (newNewsPost) => API.post('/news', newNewsPost);
export const deleteNewsPost = (id) => API.delete(`/news/${id}`);