How can I resolve this radio button issue for my custom AWS Cognito user pool attribute during account creation in my authentication flow?

I have 2 custom attributes in my cognito user pool. When the user creates an account it assigns them to one of the groups, and then routes the user to that experience. The code works completely fine when I use a text box input

'custom:userType': {
        label: 'User Type  (You are not required to have a therapist)',
        placeholder: 'Enter "groupA" or "groupB"',
        required: true,
        order: 2,
      },

However,when I change it to the radio button using this code the radio buttons do not show up (see image) How do I fix this???

'custom:userType': {
        label: 'User Type',
        required: true,
        order: 2,
        type: 'radio',
        options: [
          { label: 'groupA', value: 'groupA' },
          { label: 'groupB', value: 'groupB' },
        ],
      },

**Full code example
**

// RootAuth.jsx
import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  Authenticator,
  ThemeProvider,
  createTheme,
} from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import { fetchAuthSession } from 'aws-amplify/auth';
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';

import { useDataContext } from './context/DataContext';
import { createProfileAfterSignUp } from './utils/createUserProfile';

// Configure Amplify
Amplify.configure(awsconfig);

const myCustomTheme = createTheme({
  name: 'MyCustomTheme',
  tokens: {
    colors: {
      brand: {
        primary: {
          100: '#5a3eaf', // your main purple
        },
      },
    },
    components: {
      tabs: {
        item: {
          _active: {
            color: '#5a3eaf',
            borderColor: '#5a3eaf',
          },
        },
      },
      button: {
        link: {
          color: '#5a3eaf',
        },
        primary: {
          backgroundColor: '#5a3eaf',
        },
      },
    },
  },
});

export default function RootAuth() {
  const formFields = {
    signUp: {
      email: { label: 'Email', type: 'email', required: true, order: 1 },

      given_name: {
        label: 'First Name',
        placeholder: 'Enter your first name',
        required: true,
        order: 3,
      },
      family_name: {
        label: 'Last Name',
        placeholder: 'Enter your last name',
        required: true,
        order: 4,
      },
      password: {
        label: 'Password',
        placeholder: 'Enter your password',
        required: true,
        order: 5,
      },
      confirm_password: {
        label: 'Confirm Password',
        placeholder: 'Confirm your password',
        required: true,
        order: 6,
      },
      'custom:userType': {
        label: 'User Type',
        required: true,
        order: 2,
        type: 'radio',
        options: [
          { label: 'groupA', value: 'groupA' },
          { label: 'groupB', value: 'groupB' },
        ],
      },
    },
  };

  return (
    <ThemeProvider theme={myCustomTheme}>
      {/* 
         This div is absolutely positioned to fill the viewport (no extra scroll)
         and is centered so that the Authenticator sits in the middle on mobile. 
       */}
      <div
        style={{
          position: 'fixed',
          top: 0,
          right: 0,
          bottom: 0,
          left: 0,
          margin: 0,
          padding: 0,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          // Choose overflow: 'hidden' if you never need scrolling;
          // or 'auto' if your form might grow taller than the screen.
          overflow: 'hidden',
          backgroundColor: '#fff', // so we don't see underlying page
          zIndex: 9999, // ensure it sits above any nav
        }}
      >
        <Authenticator formFields={formFields}>
          {({ user }) => {
            if (!user) return null;
            return <PostSignInRedirect />;
          }}
        </Authenticator>
      </div>
    </ThemeProvider>
  );
}

function PostSignInRedirect() {
  const navigate = useNavigate();
  const { setUserAndFetchData } = useDataContext();

  useEffect(() => {
    async function handleSignIn() {
      try {
        console.log('Fetching auth session...');
        const session = await fetchAuthSession();
        const payload = session.tokens.idToken.payload;
        console.log('ID token payload:', payload);

        // Attempt to create user profile if it doesn't exist
        try {
          console.log('Attempting to create user profile...');
          await createProfileAfterSignUp(payload);
        } catch (error) {
          console.warn(
            'User profile creation error (may already exist):',
            error
          );
        }

        // Set user in context & conditionally fetch data
        setUserAndFetchData(payload);

        // Route based on user type
        const userTypeValFromCustom =
          payload['custom:userType']?.toLowerCase() || '';
        let userTypeVal = userTypeValFromCustom;

        if (!userTypeVal) {
          const groups = payload['cognito:groups'] || [];
          if (groups.includes('groupA')) {
            userTypeVal = 'groupA';
          } else if (groups.includes('groupB')) {
            userTypeVal = 'groupB';
          }
        }

        if (userTypeVal === 'groupA') {
          navigate('/groupA');
        } else {
          navigate('/groupB');
        }
      } catch (error) {
        console.error('Error during post-sign-in:', error);
        navigate('/groupB');
      }
    }
    handleSignIn();
  }, [navigate, setUserAndFetchData]);

  return null;
}