how to use a React state inside a property?

Question

on my app, your username is saved into a cookie, and when the site loads, it fetches the info from that cookie and it uses that data to fetch information from the .json file

import rank from "./account-info.json";
 const [username, setUsername] = useState(cookies.Name)

  if (cookies.Name) {
    var points = rank.username.points;
  }

  return (
      <div>
        {points}
      </div>
  );

and the .json file would contain

{
  "James": {
    "points": "15000",
  },
  "Amanda": {
    "points": "30000",
  },
  "Jackson": {
    "points": "45000",
  }
}

I have tried this and multiple other ways to try to get this to work, but it keeps coming back as undefined. if I set the code to this:

var points = rank.James.points;

then it works. How do I fix this?