After assign useState values but got undefined?

I assign multiple objects in one useState and then fetch the data from the database using the redux toolkit and then defined values for those objects but when I do console.log it shows me a state value is undefined but console.log the fetch data from the database is successful.

here is the code

const { data } = useGetConfigQuery();

	console.log(data);
	console.log(data?.mailgun_api_key);

	const configData = {
		mailgun_api_key: data?.mailgun_api_key,
		mailgun_username: data?.mailgun_username,
		mailgun_url: data?.mailgun_url,
		email_id_for_mail_sent: data?.email_id_for_mail_sent,
		isDiscountAvailable: data?.isDiscountAvailable,
		discounted_amount: data?.discounted_amount,
		min_amount_scheme_started: data?.min_amount_scheme_started,
		max_amount_scheme: data?.max_amount_scheme,
		razorpay_key: data?.razorpay_key,
		razorpay_secret: data?.razorpay_secret,
		razorpay_company_name: data?.razorpay_company_name,
	};

	const [edit, setEdit] = useState(false);
	const [config, setConfig] = useState(configData);

	console.log(config.mailgun_api_key);

	console.log(config);

	const handleChange = (e) => {
		setConfig({ ...config, [e.target.name]: e.target.value });
	};

the redux part

export const configApiSlice = apiSlice.injectEndpoints({
	endpoints: (builder) => ({
		getConfig: builder.query({
			query: () => ({
				url: `${CONFIG_API_URL}`,
				method: "GET",
			}),
			keepUnusedDataFor: 5,
			providesTags: ["Configuration"],
		}),
		updateConfig: builder.mutation({
			query: (data) => ({
				url: `${CONFIG_API_URL}`,
				method: "PUT",
				body: data,
				credentials: "include",
			}),
			invalidatesTags: ["Configuration"],
		}),
	}),
});

When you initially define configData, the data object from useGetConfigQuery() might not have been populated yet, so the values will be undefined.

import { useGetConfigQuery } from 'path/to/your/apiSlice'; // Import the query hook

const MyComponent = () => {
  const { data, isLoading } = useGetConfigQuery(); // Retrieve the data and loading state

  const configData = {
    mailgun_api_key: data?.mailgun_api_key,
    mailgun_username: data?.mailgun_username,
    // ... other properties
  };

  const [edit, setEdit] = useState(false);
  const [config, setConfig] = useState(configData);

  useEffect(() => {
    // Update the config state when the data changes
    setConfig(configData);
  }, [data]);

  const handleChange = (e) => {
    setConfig({ ...config, [e.target.name]: e.target.value });
  };

  // Render loading state while fetching data
  if (isLoading) {
    return <div>Loading...</div>;
  }

  console.log(config.mailgun_api_key);
  console.log(config);

  return (
    <div>
      {/* Render your component UI here */}
    </div>
  );
};

export default MyComponent;