Material-UI TextField select still only shows the old values

I have the following code, the values and change when another Dialog is completed and it will trigger useEffect to refetch data from the server but the Material-UI TextField select still only shows the old values (new value is not being shown).

import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  MenuItem,
} from '@mui/material';
import { LoadingButton } from '@mui/lab';
import { FastField, Form, Formik } from 'formik';
import { gql, useQuery } from '@apollo/client';

import { useEffect } from 'react';
import { useSession } from 'next-auth/react';
import { useEmployeeFields } from '../useEmployeeFields';
import { FormikTextField } from 'components';

interface Props {
  data: any;
  open: boolean;
  onClose: (shouldUpdateData?: boolean) => void;
}

export function AssetDialog({ data, open, onClose }: Props): JSX.Element {
  const {
    assetCategoryDialogOpen,
    assetCategoryRandom,
    toggleAssetCategoryDialog,
  } = useEmployeeFields();

  const { data: session } = useSession();

  const { data: fetchedData, refetch } = useQuery(QUERY, {
    variables: {
      business_id: session?.business.id,
    },
  });

  useEffect(() => {
    if (assetCategoryDialogOpen) {
      refetch();
    }
  }, [assetCategoryDialogOpen, refetch]);
  useEffect(() => {
    refetch();
  }, [assetCategoryRandom, refetch]);

  return (
    <Dialog open={open}>
      <Formik
        initialValues={{
          asset_category_id: '',
        }}
        enableReinitialize
        onSubmit={async (values, actions) => {
          console.log('AssetDialog', values);
          
          actions.setSubmitting(false);
          onClose(true);
        }}
      >
        {({ isSubmitting, submitForm }) => (
          <>
            <DialogTitle>
              {data ? `Edit ${data.name}` : 'Create Asset'}
            </DialogTitle>
            <DialogContent dividers>
              <Form className="flex flex-col space-y-4">
                <FastField
                  component={FormikTextField}
                  name="asset_category_id"
                  label="Asset Category"
                  placeholder="-Select-"
                  select
                  className="w-48"
                >
                  {(fetchedData?.asset_categories || []).map((item: any) => (
                    <MenuItem key={item.id} value={item.id}>
                      {item.name}
                    </MenuItem>
                  ))}
                  <MenuItem onClick={() => toggleAssetCategoryDialog()}>
                    + Add Item
                  </MenuItem>
                </FastField>
              </Form>
            </DialogContent>
            <DialogActions>
              <Button autoFocus onClick={() => onClose()}>
                Cancel
              </Button>
              <LoadingButton
                loading={isSubmitting}
                type="button"
                onClick={submitForm}
              >
                Save
              </LoadingButton>
            </DialogActions>
          </>
        )}
      </Formik>
    </Dialog>
  );
}

const QUERY = gql`
  query AssetCategories($business_id: UUID!) {
    asset_categories(business_id: $business_id) {
      id
      name
    }
  }
`;