Add an array of data to an useState empty array using useState setter function in Reactjs

Hello I am working on a personal project and I can’t seem to add an array of data that I am fetching from the backend to a useState array I can see the array but when I try to update it using the useState setter function it doesn’t work or show no update at all.

I am feeling so dumb on this and have been stuck for around 3 hrs.

I am attaching my react code and a screenshot of the Google Chrome inspection tool. Please mention if you need more code I will try to provide as much as possible.

Thank you.

import { useEffect, useState } from "react";
import axios from "axios";
import toast from "react-hot-toast";

const UseGetconversation = async () => {
  const [loading, setloading] = useState(false);
  const [Conversations, setConversations] = useState([]);

  useEffect(() => {
    const getconversation = async () => {
      setloading(true);
      try {
        const res = await axios.get("api/users/");
        if (res.error) {
          throw new Error(res.error);
        }
        const data = res.data;
        console.log(data);
        console.log(Array.isArray(data));
        setConversations(data);
        console.log(Conversations);
      } catch (error) {
        toast.error(error.message);
      } finally {
        setloading(false);
      }
    };

    getconversation();
  }, []);

  return { loading, Conversations };
};

export default UseGetconversation;

enter image description here