Changing a variable initialized in the outer scope after fetching using mysql

Question

I'm trying to make a history page where users can see the videos they recently uploaded or downloaded. I'm writing it in NextJS. I'm using Mysql to store the data and when i fetch them I pass them down as props to the website. Also, I pass a authenticatedStatus property which I use to render different messages to the website using conditional rendering.

I initialize the data constant and then I change it's properties. I change the authenticatedStatus Property and the userVideos Property AFTER I fetch the videos using mysql or veryfing that the user is logged in and their account is valid. The thing is that the browser won't show the videos and it always shows "Login to view this page when I am logged in and I'm 1000% sure that the authenticatedStatus property is set to true. Logged the data constant and it is always shows its empty.

Any idea?

export async function getServerSideProps(context) {
  const { decryptToken } = require("../utilities/decryptToken")
  const connection = require("../utilities/connection")
  const data = {}; //The constant I'm talking about
  if (context.req.headers.cookie) {
    const cookies = cookie.parse(context.req.headers.cookie)

    if (cookies.webToken) {

        try {
            const payload = await decryptToken(cookies.webToken)

            connection.query(`SELECT * FROM Users WHERE email = "${payload.email}" LIMIT 1`, async (err, data) => {
              if (err) throw err;
              console.log(data)

              if (data.length < 1) {
                return data.authenticatedStatus = false;
              } else {
                data.authenticatedStatus = true
              }
            })
                  try {

                      connection.query(`SELECT id, video, title FROM History WHERE email = "${payload.email}" ORDER BY id DESC`, async (err, DBdata) => {
                        data.userVideos = DBdata;
                        console.log(DBdata)

                  } catch (err) {
                    consle.log(err)
                  }
        } catch (err) {
            // JWT
            if (err.message == "Invalid Compact JWE") return data.authenticatedStatus = false;
        }

    } else {
        data.authenticatedStatus = false
    }
  }

The website part:

<div className="history">
          {!props.data.authenticatedStatus && <h2 style={{color: "#fc2137"}}>You must login to view this page</h2>}
          {props.data.authenticatedStatus && !props.data.userVideos && <h2 style={{color: "#fc2137"}}>No videos have been downloaded</h2>}
          
          {props.data.authenticatedStatus && (
          <div className="videoList">
              {props.data.userVideos.map((video) => (
                  <div className="listedVideo" key={video.id} data-nosnippet>
                      <img src={`image here`} alt={video.title} />
                      <h3>{video.title}</h3>
                      <a className="downloadButton" download={video.title} href={`link here`}>Download</a>
                  </div>
              ))}
          </div>
          )}
      </div>