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. If I use a text box input, the code works fine:

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

If I use a the radio button, the radio buttons do not show up (see image) How can I fix this, using either a radio button or a dropdown?

'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;
}