Get Data from Axios and Store in interface Contains Multiple array in Type Script

Here are my changes Modified sandbox link

1. userDetail(id: string) returns you a list of user info, no single user info. Advice: Name your methods with what they do. userDetail has no verb. So it could be getUserDetail, updateUserDetail, deleteUserDetail and so on.

//old code
userDetail: (id: string) =>
  axios.get<userDetail[]>(`/User/GetUserByID/${id}`),

//Correct
userDetail: (id: string) =>
    axios.get<userDetail>(`/User/GetUserByID/${id}`)

2. Your state type was wrong. Advice: Name types, interfaces PascalCase Some typescript guidelines

/// your version array of any OR userDetail. I believe you want to store a single user detail
const [userDetails,setUserDetail]=useState<userDetail | []>([])


///correct
const [userDetails, setUserDetail] = useState<userDetail | undefined>()

3. You had issues with loading. You were not waiting the proimse.

/// your version
  useEffect(()=>{
    // Agent File to access axios Request
    const result= agent.createUser.userDetail("1")
    setUserDetail(result);
  },[])

/// correct using Promise.then. Note that error is not handled

  useEffect(() => {
    // Agent File to access axios Request
    agent.createUser.userDetail("1").then((axiosResponse) => {
      setUserDetail(axiosResponse.data);
      setIsLoading(false);
    });
  }, []);

// correct using async await

useEffect(() => {
  //declare it
  const loadUserDetail = async () {
    const axiosResponse = await agent.createUser.userDetail("1");
    setUserDetail(axiosResponse.data);
    setIsLoading(false);
  }

  //call it
  loadUserDetail();
}, []);