Getting the response twice from server in react

I am working on a mern app and currently working on the dashboard part of it , now the problem is i am getting some data from my express server but the problem is my server runs only once but when i console log my react code i can see that it se getting data twice , once the object is empty and in the next response i get the whole data, this creating a serious problem because i append that in my redux as soon as i get it from server and when i use that data in another component i get undefined and the code breaks , because it doesn't wait for the second response and throws error on the first one. Now i dont know what type of problem is but here is my code:- Private route code:-

import React, { Component ,useEffect} from 'react';
import { useSelector } from 'react-redux';
import {Navigate, Route , useNavigate} from 'react-router-dom';
import Home from './Home/Home';
import Landing_page from './login_and_reg/Landing_page/Landing_page';
import {useDispatch} from 'react-redux'
import { bindActionCreators } from 'redux';
import {action} from '../state/index'

const Protected_routes = () => {
    const Navigate = useNavigate();
    const auth_check = useSelector(state => state.auth)
    const data_check = useSelector(state => state.data)
    const dispatch = useDispatch();
    const {auth_checking,user_data} = bindActionCreators(action,dispatch)


    const private_routes = async() =>{
        const res = await fetch('/getdata',{
            method:'POST',
            headers:{
                'Content-Type' : 'application/json',
                'x-auth-token':localStorage.getItem('token')
            }
        })
        const data = await res.json();
        if(data.status == 201){
            {auth_checking('true')}
            user_data(data.userdata)
        }
        else{
            {auth_checking('false')}
        }
    }

    useEffect(()=>{
        private_routes()
    },[])

    console.log({auth_check})
    console.log('this is the data i get from express',data_check)
    if (auth_check=='true') {
            return <Home/>  
    } 
    else {
        return <Landing_page/> 
        }        
    
}

export default Protected_routes

    
        useEffect(()=>{
            private_routes()
        },[])
    
        console.log({auth_check})
        console.log('this is the data i get from express',data_check)
        if (auth_check=='true') {
                return <Home/>  
        } 
        else {
            return <Landing_page/> 
            }        
        
    }
    
    export default Protected_routes

here is the photo from console:-

server side code:-

const authToken = async(req,res,next)=>{
  try{
    const authHeader = req.headers['x-auth-token']
    const verified = jwt.verify(authHeader, process.env.ACCESS_TOKEN);
    const user_data = await user.find({_id:verified.id})
    const final_data = {first_name:user_data[0].first_name,second_name:user_data[0].second_name,date:user_data[0].date,gender:user_data[0].gender}
    req.user_data = final_data
    
    next();

  }
  catch(err){
    res.status(400).json({message:'not right',status:400});
    console.log(err)
  }
  
}

app.post('/getdata' , authToken,(req,res) =>{
  
  res.status(201).json({message:'authorized',status:201,userdata:req.user_data});
})