how to import a const into a useState function

[catakul]

Ich hab das Periodensystem mit css grid nachgebaut.
Die darin enthaltenen Informationen (Element Symbol, Nummer und Name) stammen aus einem Array in meiner JSON Datei, die ich mit Hilfe der map Funktion anzeigen lasse.
Dieses Array beinhaltet alle Informationen zu jedem einzelnen Element, verpackt in Objekten.
Der nächste Schritt wäre es mir diese Objekte in einem popup-Fenster anzeigen zu lassen.
Hierfür muss ich meine Konstante in einem useState packen um anschließend über React Modals die popup Fenster erstellen zu können.
Bevor ich mir den Kopf zerbreche wie Modals funktionieren, ist die Frage wie ich das useState verwende (siehe letzten Screenshot, Zeile 2 welche aktuell auskommentiert ist)

[pixelass]

Versuch mal ausserhalb (auf oberster Ebene in der Komponente, das useState zu verwenden.

Anbei eine reduzierte Form deines Ansatzes.

function MyComponent() {
  const [info, setInfo] = useState(null);
  function handleClick(elementNumber) { // besser wäre es hier eine ID zu verwenden.
    // Zuerst finden wir das Element anhand der Nummer
    const element = elements.find(element_ => element_.number === elementNumber);
    // Danach wird es in den State gesendet
    setInfo(element); 
  }

  return <div>{element?.name}</div>
}

Tipp
Es wäre leichter Code als Codeblock (nicht als Image) hier zu posten, dadurch tun wir uns leichter eine Lösung vorzuschlagen.
Am besten ein Link zum aktuellen Code oder noch besser das Problem isolieren und in einer Codesandbox bereitstellen. Wir haben dazu einen kleinen Guide geschrieben: https://github.com/neuefische/questions/wiki/How-to-ask-good-questions