i am currently working on chat app , but when i got to the chat component, i have been having this error when i tried submitting the chat into the firestore database that i created with a collection called channels

this is my code below;

const sendMessage = async (e) => {
    e.preventDefault();
    let input = inputRef.current.value;
    if (input !== "") {
      const messagesRef = doc(db, "channels", channelId, "messages");
      const payload = {
        timestamp: serverTimestamp(),
        message: inputRef.current.value,
        name: user?.displayName,
        photoURL: user?.photo,
        email: user?.email,
      };
      await addDoc(messagesRef, payload);
    }

when i click on the submit button to create that document i get this error below.

Unhandled Rejection (FirebaseError): Invalid document reference. Document references must have an even number of segments, but channels/8jIExW7vKcXJRJdmq9b3/messages has 3.

i have been trying to seek help but i have not gotten since 3 days now.