¿Cómo abrir un modal de React Material-UI y poblarse mediante una llamada Ajax al hacer clic en un botón?

Intenté buscar una pregunta similar pero no encontré ninguna, disculpen si me perdí alguna. Estoy usando React Material-UI para crear una aplicación web simple. Tengo un XGrid que lista una serie de productos y varias estadísticas sobre un rango de fechas seleccionado por el usuario. Cada fila tiene un botón que el usuario puede hacer clic. La idea es que, al hacer clic en el botón, la aplicación llame a una API para obtener información relevante sobre el producto en esa fila. Me gustaría que la información devuelta por la API se muestre en un modal de Material-UI.

Me estoy atascando en cómo pasar la información desde la API al componente de Modal y mostrarla. Tengo un ejemplo simple en el código a continuación que es cercano a lo que quiero lograr.

import "./styles.css";
import React from "react";
import { Button, Modal, Typography, Box } from "@material-ui/core";

export default function App() {
  const [open, setOpen] = React.useState(false);
  const handleClose = () => setOpen(false);

return (
    <div classname="App">
      <button variant="outlined" color="primary" onclick="{()" ==""> {
          setOpen(true);
          (async () => {
            let response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
            let apiCall = await response.json();
            let grouped_data = JSON.parse(apiCall.data);
          })();
        }}
      >
        Click Here
      </button>
      <modal open="{open}" onclose="{handleClose}">
        <box>
          <typography>Texto Aleatorio</typography>
        </box>
      </modal>
    </div>
  );
}

En este ejemplo, he aislado el código en un solo App.js en codesandbox. Sin embargo, en la práctica tendría el Button y Modal combinados en un archivo de componente separado con la URL de API pasada como una prop al componente. También usé JSONPlaceholder en lugar de mi API real. Actualmente, el botón muestra un modal que dice “Texto Aleatorio”. Sin embargo, me gustaría que muestre la información recuperada usando la llamada fetch.

Además, la tabla tendrá miles de filas, así que me gustaría evitar llamar a la API hasta que el usuario realmente haga clic en el botón. De esa manera, no sobrecargo al servidor con miles de llamadas de API separadas cada vez que alguien cargue la página. Agradezco cualquier ayuda que alguien pudiera proporcionar.