I'm getting myself confused with React here (total newbie). I have a simple component that fetches some data that always returns {"score":100}:

import React, { useEffect, useState } from "react";
import Graph from "./Graph.js";

const UsingFetch = () => {
  const [results, setResults] = useState({"score": null}); // initially set score to null

  const fetchData = () => {
    fetch("https://myapi.com/id=1")
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        setResults(data); // update results with integer score
      });
  };
  useEffect(() => {
    fetchData();
  }, []);
  console.log(results)
  return (
    <div>
      <Graph results={results.score}></Graph>
    </div>
  );
};

export default UsingFetch;

My Graph.js looks like the following:

import { React } from 'react'

export default function Graph({results}) {
  console.log(results)
  return (
      <div>
          <h1>{results}</h1>
      </div>
  )
}

Why doesn't the score render on the page? I've confirmed that the data returns correctly, I just can't seem to access it right.

Here's the console output: