I have been trying to figure out why I couldn’t log the value of requestData to the console successfully. Somehow it’s not storing the value of selectedCategory in category as expected. Please help

// formInputComponent

import React, { useState } from 'react';
import DropdownContent from './NicheDropdown';
import { useSession } from "next-auth/react";

const CommChat = () => {
    const [message, setMessage] = useState('');
    const [response, setResponse] = useState('');
    const { data: session } = useSession();

    const email = session?.user?.email;
    const [selectedCategory, setSelectedCategory] = useState('');

    const blogCategories = [
        { name: "Books and Literature", href: "#", icon: "booksIcon" },
        { name: "DIY and Crafts", href: "#", icon: "diyIcon" },
        { name: "Learning", href: "#", icon: "educationIcon" },
       
    ];

    const handleCategorySelect = (category) => {
        console.log("Selected category:", category);
        setSelectedCategory(category.name);
    };

    const handleSubmit = async (event) => {
        event.preventDefault();

        console.log("Request data:", requestData, selectedCategory);

          if (!selectedCategory) {
             console.error("Please select a category");
            return;
         }

        const requestData = {
            category: selectedCategory,
            message: message,
            email: email
        };

        console.log("Request data:", requestData);

        try {
            const response = await fetch('/api/chatContent', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestData)
            });

            if (response.ok) {
                const responseData = await response.json();
                setResponse(responseData.message);
            } else {
                console.error('Failed to send message');
            }
        } catch (error) {
            console.error('Error:', error);
        }
    };

    return (
        <div className="w-11/12">
            <div className="relative w-full">
                <footer className="max-w-4xl mx-auto sticky top-0 p-3 sm:py-6">
                    <form onSubmit={handleSubmit}>
                        <DropdownContent
                            className="flex flex-col"
                            blogCategories={blogCategories}
                            onSelect={handleCategorySelect}
                        />
                        <textarea
                            className="p-4 pb-12 block w-full bg-gray-100 border-gray-200 rounded-lg text-sm focus:border-red-500 focus:ring-red-500 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600"
                            placeholder="What's going on today..."
                            value={message}
                            onChange={(e) => setMessage(e.target.value)}
                        />
                        <button className='bg-slate-500 hover:bg-slate-600 text-white font-bold py-2 px-4 rounded-md my-4' type="submit">Send message</button>
                    </form>
                    {response && <p>{response}</p>}
                </footer>
            </div>
        </div>
    );
};

export default CommChat;

//Dropdown component

import React, { useState } from "react";
import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button } from "@nextui-org/react";

const DropdownContent = ({ blogCategories }) => {
    const [selectedNiche, setSelectedNiche] = useState(null);

    const handleNicheSelect = (niche) => {
        setSelectedNiche(niche);
    };

    return (
        <Dropdown>
            <DropdownTrigger>
                <Button className="text-black font-thin h-7 rounded-none mb-1">
                    <img src="/images/niche.png" className="w-6 h-6" />
                    {selectedNiche ? selectedNiche.name : "Select a Niche"}
                </Button>
            </DropdownTrigger>
            <DropdownMenu aria-label="Dropdown blogCategories" className="dropdown-menu overflow-y-auto">
                {blogCategories && blogCategories.map((item) => (
                    <DropdownItem key={item.name} onClick={() => handleNicheSelect(item)} className="text-black font-thin">
                        {item.name}
                    </DropdownItem>
                ))}
            </DropdownMenu>
        </Dropdown>
    );
};

export default DropdownContent;