JS element returns 'null' when retrieving value from textarea

For my project, I'm submitting a "tweet" form asynchronously, but I'm having trouble retrieving the textarea value to pass into my function and update the UI. The values from the tweet/post are saving to my models (including the tweet) and every other field in (username, user profile picture, tweet image) are displaying properly, but its just the textarea that's causing me problems and not displaying at all. Here is the relevant code for reference.

Section of index.html

            <form id="tweet-form" method="post">
                <div class="post-section-row">
                    <a class="creator" href="{% url 'change_profile' %}"> 
                        <img src="{{ user_profile.profile_picture.url }}" class="profile-pic small-post-section" >
                    </a>
                    <!-- Cannot retrieve value from this line -->
                    <textarea id="post-content" name="tweet" placeholder="What's Happening?" oninput="autoExpand(this); checkCharacterCount(this)"></textarea>

                </div>

                <!-- To display tweet image preview and delete functionality -->
                <div id="tweet-picture-preview" style="display: none;"></div>

                <div class="post-section-row">
                    <div class="error-message"></div>
                    <div class="tweet-actions">
                        <label for="picture" title="Upload Picture">
                            <span class="material-symbols-outlined">photo_library</span>
                            <span class="tooltiptext">Upload Picture</span>
                            <input type="file" id="picture" name="tweet-picture" class="file-input" accept="image/jpeg, image/png, image/gif, image/jpg" onchange="previewTweetImage(event)">
                        </label>                        
                        <input type="submit" id="post-button" value="Post">
                    </div>
                </div>
            </form>

JS file (code within DOMContentLoaded listener)

    tweetForm.addEventListener('submit', function(event) {
      event.preventDefault();
  
      const csrftoken = getCookie('csrftoken');
      const formData = new FormData(tweetForm);
      fetch("/post_tweet/", {
        method: "POST",
        body: formData,
        headers: {
          'X-CSRFToken': csrftoken,
        },
      })
      .then(response => response.json())
      .then(data => {
        console.log(data.message);

        // This returns 'null'
        const tweetInput = document.getElementById("post-content");
        const tweet = tweetInput.value;

        // ...

        addPostToPage(tweet, tweetImage, username);
      })
      .catch(error => {
        console.log(error);
      }); 

I've tried changing the tweetInput from querySelector("#post-content); and getElementById as seen above, and nothing changes. Same with replacing .value with .TextContent, but it's still not able to retrieve the associated value.

Let me know if you require any additional files for reference and clarity. Thank you in advance!

Try to simplify this code. You have to first take the textarea value into a variable and then try to use it after getting a response from the server.
Check the below code. It is working. Just do the server request later.

const tweetForm = document.getElementById('tweet-form');
tweetForm.addEventListener('submit', function (event) {
    event.preventDefault();
    const tweetInput = document.getElementById("post-content");
    const tweet = tweetInput.value;
    console.log(tweet);

    // your rest of the code to send requests on the server
});