Why am I not getting firebase storage files url in my react app?

In my React app, I've main three functionality which is connected to firebase. firebase auth, real-time chat, and this third one require firebase storage. I want to upload images with chat messages. when I try to upload images, the console gives me this error when I try to console.log(url)
I want to get that downloaded image url and store it in my firestore database and then use that url inside my Message.js component.

My Chat.js component

  const [messages, setMessages] = useState([]);
  const [assets, setAssets] = useState(null);

  useEffect(() => {
    if (channelId) {
      db.collection("channels")
        .doc(channelId)
        .collection("messages")
        .orderBy("timestamp", "desc")
        .onSnapshot((snapshot) => {
          setMessages(snapshot.docs.map((doc) => doc.data()));
        });
    }
  }, [channelId]);

  const sendMessage = (e) => {
    e.preventDefault();
    const uploadTask = storage.ref(`assets_discord/${assets.name}`).put(assets);
    uploadTask.on("state_changed", () => { 
      storage
        .ref("assetsdiscord")
        .child(assets.name)
        .getDownloadURL()
        .then((url) => {
          db.collection("assetUrl").add({
            imgUrl: url,
          });
          console.log(url);
          setAssets(null);
        });
      });
      db.collection("channels").doc(channelId).collection("messages").add({
        user: user,
        message: input,
        timestamp: firebase.firestore.FieldValue.serverTimestamp(),
      });
      
    setInput("");
  };

  const hideInput = (e) => {
    e.preventDefault();
    setShowInput(!showInput);
  };

  return (
    <div className="chat">
      {channelId ? (
        <>
          <ChatHeader channelName={channelName} />
          <div className="chat__messages">
            {messages.map((message) => (
              <Message
                user={message.user}
                message={message.message}
                timestamp={message.timestamp}
                assetUrl={message.imgUrl}
              />
            ))}
          </div>
          <div className="chat__input">
            {showInput ? (
              <>
                <form action="#">
                  <label htmlFor="imgFiles" className="upload__img">
                    <AddCircle fontSize="large" />
                  </label>
                  <input
                    type="file"
                    id="imgFiles"
                    className="hidden"
                    accept="image/*"
                    onChange={(e) => {
                      if (e.target.files[0]) {
                        setAssets(e.target.files[0]);
                      }
                    }}
                  />
                  <input
                    disabled={!channelId}
                    value={input}
                    onChange={(e) => setInput(e.target.value)}
                    type="text"
                    placeholder={`Send Message to #${channelName}`}
                  />
                  <button
                    onClick={sendMessage}
                    className="chat__inputButton"
                    type="Submit"
                  >
                    Send Message
                  </button>
                  <button onClick={hideInput}>Hide</button>
                </form>
              </>
            ) : (
              <p
                onClick={() => setShowInput(!showInput)}
                className="show__input"
              >
                Show
              </p>
            )}
          </div>
        </>
      ) : (
        <>
          <div className="chat__selectRoom">
            <ArrowLeftIcon
              style={{ fontSize: "30px" }}
              className="arrow__left"
            />
            <h3>Select Any Room to get Started</h3>
          </div>
        </>
      )}
    </div>
  );

Message Component

const Message = ({ user, timestamp, message, assetUrl }) => {
  // console.log(assetUrl);
  return (
    <div className="message">
      <Avatar src={user.photo} />
      <div className="message__info">
        <h4>
          {user.displayName}
          <span className="message__timestamp">
            {new Date(timestamp?.toDate()).toUTCString()}
          </span>
        </h4>
        <p>{message}</p>
        {/*
         <ImageUpload assetUrl={assetUrl} /> 
       */}
        <img src={assetUrl} alt="dummy" />
      </div>
    </div>
  );
};

firebase sequrity rules

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

Link to live website