Redux - API is being called multiple times (Redux Thunk)

Question

I am using Next.js and Redux as a state management. Everything is working perfectly fine except one thing and that is API calls. What I mean by this is that API is being called multiple times even though I dispatched it just once. When I go and see in the network tab in Google Chrome, I see multiple calls being called.

I am also using Redux Thunk and Redux Toolkit:

store

import { configureStore } from "@reduxjs/toolkit";
import layoutSlice from "./layoutSlice";
export const store = configureStore({
  reducer: {
    layout: layoutSlice,
  },
});

layoutSlice

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";

const BASE_URL = "http://localhost:1337";

export const getHeaderData = createAsyncThunk(
  "layout/getHeaderData",
  async () => {
    const response = await axios.get(
      `${BASE_URL}/api/navigations?populate=*&sort=id`
    );
    return response.data;
  }
);

export const getFooterData = createAsyncThunk(
  "layout/getFooterData",
  async () => {
    const response = await axios.get(
      `${BASE_URL}/api/footers?populate[ContactForm][populate]=*&populate[Links][populate]=*&populate[Info][populate]=*`
    );
    return response.data;
  }
);

const initialState = {
  header: [],
  footer: [],
  isLoadingHeader: false,
  isLoadingFooter: false,
};

const layoutSlice = createSlice({
  name: "layout",
  initialState,
  extraReducers: {
    [getHeaderData.pending]: (state) => {
      state.isLoadingHeader = true;
    },
    [getHeaderData.fulfilled]: (state, action) => {
      state.header = action.payload;
      state.isLoadingHeader = false;
    },
    [getHeaderData.rejected]: (state) => {
      state.isLoadingHeader = false;
    },
    [getFooterData.pending]: (state) => {
      state.isLoadingFooter = true;
    },
    [getFooterData.fulfilled]: (state, action) => {
      state.footer = action.payload;
      state.isLoadingFooter = false;
    },
    [getFooterData.rejected]: (state) => {
      state.isLoadingFooter = false;
    },
  },
});

export default layoutSlice.reducer;

generalLayout (where the API is called)

import React, { useEffect, useState } from "react";
import { Header, Footer } from "../components";
import { useDispatch, useSelector } from "react-redux";
import { getHeaderData, getFooterData } from "../redux/layoutSlice";

const GeneralLayout = ({ children }) => {
  const { isLoadingHeader, isLoadingFooter } = useSelector(
    (state) => state.layout
  );
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getHeaderData());
    dispatch(getFooterData());
  }, []);

  if (isLoadingHeader === true || isLoadingFooter === true) {
    return <div>Loading...</div>;
  }

  return (
    <>
      <Header />
      {children}
      <Footer />
    </>
  );
};

export default GeneralLayout;

I am also using Strapi (dont mind the query for the API call, it works for me so I do not think the problem is there, at least it should not be)

Network tab