getserversideprops axios return Request failed with status code 404 but it work on useffect

Question

I am fetching a big problem with axios in my project. I used axios for fetching data in getServerSideProps. but is it showing 'Request failed with status code 404', in the same time i also used axios in useEffect where it get data from api.

export async function getServerSideProps() {
  try {
    const ApiUrl = apiBaseUrl + "/api/my-url";
    const homeData = await axios
      .get(ApiUrl)
      .then((response) => {
        return response.data;
      })
      .catch((error) => {
        return error.message;
      });

    return {
      props: {
        homeData: homeData, // its is return Request failed with status code 404
        error: false,
        ApiUrl: ApiUrl,
      },
    };
  } catch (e) {
    return {
      props: {
        error: true,
        homeData: null,
        message: e.message,
      },
    };
  }
}

through i cna not get data from getServerSideProps i used useEffect

useEffect(() => {
  if (typeof props.homeData === "string") {
    console.log(props); // it is showing error 'Request failed with status code 404'
  } else if (props.homeData) {
    console.log(props.homeData);
    // setData(props.homeData);
  } else {
    axios
      .get(apiBaseUrl + "/api/my-url")
      .then((response) => {
        seteData(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }
}, [props]);