Problem with req. query;

export default async function handler(req, res) {
  const client = await clientPromise;
  const db = client.db("USERS");
  const { userName } = req.query;
  switch (req.method) {
  case "POST": {
    const bodyObject = JSON.parse(req.body);
    const query = {
      user: bodyObject.user,
      avatar: bodyObject.avatar,
      level: bodyObject.level,
    };
    const update = { $set: { score: bodyObject.score } };
    const options = { upsert: true };

    const newScore = await db
      .collection("USERS")
      .findOneAndUpdate(query, update, options);

    res.json(newScore);
    break;
  }
  case "GET": {
    const users = await db
      .collection("USERS")
      .find({ user: { $in: [userName] } })
      .toArray();
    res.json(users);
    break;
  }

  default: {
    // do nothing
  }
  }
}

import styles from '../styles/Elements.module.css';
import clientPromise from '../lib/mongodb';


export default function ScoreHeader({ users }) {
  console.log(users)

  return (
    <div className={styles.containerIndex}>
     fadsfds
    </div>
  );
}

export async function getServerSideProps({}) {
  const client = await clientPromise;
 const db = client.db('USERS');

  const res = await fetch(`http://localhost:3000/api/usersAPI`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  });
  const users = await res.json();

  return {
    props: { users },
  };
}