I am trying to retrieve information using the useSearchParams function and then display that information through a message component I have created. Below you can see my code for the message component:

export default function Message({children, avatar, username, description}){
    return(
        <div className="bg-white p-8 border-b-2 rounded-lg  ">
            <div className="flex items-center gap-2">
                <img src={avatar} className="w-10 rounded-full" />
                <h2>{username}</h2>
            </div>
            <div className="py-4">
                <p>{description}</p>
            </div>
            {children   }
        </div>
    )  
};

And this is the code where I attempt to display the information given in the url parameters using useSearchParams. This is [slug] file I have created.

"use client";
import Message from "../components/message"
import {useRouter, useSearchParams, useParams} from "next/navigation";
import {useEffect, useState} from "react"
import {auth, db} from '../../../utils/firebase';
import {toast} from 'react-toastify'; 



export default function Details(){
    const router = useRouter();
    const routeData = useSearchParams();
    const [message, setMessage] = useState('');
    const [allMessage, setAllMessages] = useState([]);  
    console.log(routeData.id );
    return(
        <div>
            <Message {...routeData}>  </Message>
            
        </div>
        
    );
}

The information that is being passed into the URL is there as I can see it in the URL and I can even console.log that information from the useSearchParams function, yet when I actually go to the slug page, there is no information being displayed but rather an empty div. I am sure that my slug file and page is working but it is just the part of sending the routeData into the message component that is not working. Any advice is appreciated.