How to build a graph on crud operations using neo4j graphql library?

Question

I was trying to build grandstack app using neo4j graphql library. Rather than working on already existing data, like the most tutorials shown in the internet for neo4j. I want to build a graph by asking the user data using a react form. As I am new to neo4j graphql library and apollo server i am finding it hard to understand how to setup.

I have setup an example react form code below. From here i was getting confused how to use neo4j graphql library. can some one help me here.

import './App.css';
import {TextField, Button} from "@mui/material"
import {useState} from "react"
function App() {
  const [data, setdata] = useState("");
  const [datatwo, setdatatwo] = useState("");
  const onSubmit = (e) =>{
    e.preventDefault();
    alert({data})
  }
  return (
    <div className="App">
      <form  noValidate onSubmit={onSubmit}>
      <TextField id="outlined-basic" label="Name" variant="outlined" onChange={(e)=>setdata(e.target.value)}/>
      <TextField id="outlined-basic" label="Name" variant="outlined" onChange={(e)=>setdatatwo(e.target.value)}/>
      <Button variant="contained">Submit</Button>
      </form>
      <div>First Name is:{data}</div>
      <div>last Name is:{datatwo}</div>
    </div>
  );
}
export default App;