ballistic-builder/app/Fragments/States/index.tsx

import React from 'react';
import { makeStyles } from '@mui/material/styles';
import InputLabel from '@mui/material/InputLabel';
import FormHelperText from '@mui/material/FormHelperText';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import NativeSelect from '@mui/material/NativeSelect';
import { useQuery, gql } from "@apollo/client";


const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
}));

  const GET_STATES = gql`
      {
       states {
    abbrev
    name
    }
  }`

export default function StateNativeSelects() {
  const classes = useStyles();
  const [state, setState] = React.useState({
    abbrev: '',
    name: '',
  });

  const handleChange = (event) => {
    const name = event.target.name;
    setState({
      ...state,
      [name]: event.target.value,
    });
  };

const { loading, error, data } = useQuery(GET_STATES);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor="state-native-simple">State</InputLabel>
        <Select
          native
          value={state.abbrev}
          onChange={handleChange}
          inputProps={{
            name: 'abbrev',
            id: 'abbrev-native-simple',
          }}
          >
          <option aria-label="None" value="" />
        {data.states.map(({ abbrev, name }) => (
            <option value={abbrev}>{name}</option>
          ))}          
        </Select>
      </FormControl>
    </div>
  );
}