React JSX not returning Icon or String value based on user's input for password

I am currently working on a sign up page and whenever a user types in a password, I would like the end icon to have a string stating "Your password must be at least 12 characters long" or return a green checkmark if the password length is at least 12 characters long. However, nothing is returning. Here is my code in question:

import { useState } from "react";
import { useDispatch, useSelector } from 'react-redux'
import { createUsers } from "../../reducers/usersReducer";

import { VectorIllustration } from "./VectorIllustration"
import '../../style-sheets/SignUpForm.css'

import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers'
import { InputAdornment, TextField } from '@mui/material';
import AccountBoxSharpIcon from '@mui/icons-material/AccountBoxSharp';
import AlternateEmailSharpIcon from '@mui/icons-material/AlternateEmailSharp';
import EmailSharpIcon from '@mui/icons-material/EmailSharp';
import LockSharpIcon from '@mui/icons-material/LockSharp';
import AddLocationAltSharpIcon from '@mui/icons-material/AddLocationAltSharp';
import Dangerous from "@mui/icons-material/Dangerous";
import CheckCircleIcon from '@mui/icons-material/CheckCircle';

const SignUpForm = () => {
  const dispatch = useDispatch();
  const state = useSelector(state => state);
  const [selectedDate, setSelectedDate] = useState(new Date());
  console.log(state)

  const handleDateOfBirth = (e) => {
    setSelectedDate(e)
    dispatch(createUsers(e.toString(), 'dateOfBirth'))
  }

  const handleLoginRoute = () => {

  }

  return (
    <div className="sign-up-page-container">
      <VectorIllustration />
      <div className="sign-up-form-container">
        <h1 className="sign-up-text">Sign Up</h1>
        <form onSubmit={handleLoginRoute}>

          <TextField className="users-username-input" required={true} label='Username' InputProps={{
            startAdornment: (
              <InputAdornment position='start'>
                <AlternateEmailSharpIcon color="primary"/>
              </InputAdornment>
            )
          }} onChange={(e) => dispatch(createUsers(e.target.value, 'username'))} />

          <TextField className="users-name-input" required={true} label='Name' InputProps={{
            startAdornment: (
              <InputAdornment position='start'>
                <AccountBoxSharpIcon color="primary"/>
              </InputAdornment>
            )
          }} onChange={(e) => dispatch(createUsers(e.target.value, 'name'))}/>

          <TextField className="users-email-input" required={true} label='Email' InputProps={{
            startAdornment: (
              <InputAdornment position='start'>
                <EmailSharpIcon color="primary"/>
              </InputAdornment>
            )
          }} onChange={(e) => dispatch(createUsers(e.target.value, 'email'))}/>

          <TextField className="users-password-input" required={true} label='Password' InputProps={{
            startAdornment: (
              <InputAdornment position='start'>
                <LockSharpIcon color="primary"/>
              </InputAdornment>
            ),
            endAdornment: (
              <InputAdornment>
                {() => {
                  if (state.users.password && state.users.password.length() >= 12) {
                    return <CheckCircleIcon color="success" />
                  }
                  return 'Password must be at least 12 characters long!'
                }}
              </InputAdornment>
            )
          }} onChange={(e) => dispatch(createUsers(e.target.value, 'password'))}/>

          <TextField className="users-confirmation-password-input" required={true} label='Confirm Password' InputProps={{
            startAdornment: (
              <InputAdornment position='start'>
                <LockSharpIcon color="primary"/>
              </InputAdornment>
            ),
            endAdornment: (
              <InputAdornment position="end">
                {state.users.password === state.users.confirmationPassword ? <CheckCircleIcon color="success"/> : <Dangerous sx={{ color: 'red' }}/>}
              </InputAdornment>
            )
          }} onChange={(e) => dispatch(createUsers(e.target.value, 'confirmationPassword'))}/>

          <LocalizationProvider dateAdapter={AdapterDateFns}>
            <DesktopDatePicker renderInput={(params) => <TextField required={true} {...params} className='users-date-of-birth-input' sx={{ svg: {color: '#1976d2'}}} />} inputFormat='MM/dd/yyyy' value={selectedDate} onChange={handleDateOfBirth} label='Date of birth' InputAdornmentProps={{ position: 'start' }} />
          </LocalizationProvider>

          <TextField className="users-location-input" required={true} label='Location' InputProps={{
            startAdornment: (
              <InputAdornment position='start'>
                <AddLocationAltSharpIcon color="primary"/>
              </InputAdornment>
            )
          }} onChange={(e) => dispatch(createUsers(e.target.value, 'location'))}/>
          <button className="submit-button" type="submit" disabled={state.users ? true : false}>Continue</button>
          <p className="already-have-an-account-text">Already have an account? <b className="bolded-log-in-link" onClick={handleLoginRoute}>Log in</b></p>
        </form>
      </div>
    </div>
  )
}

export default SignUpForm;

The problem is specifically located at lines 65-81:

<TextField className="users-password-input" required={true} label='Password' InputProps={{
            startAdornment: (
              <InputAdornment position='start'>
                <LockSharpIcon color="primary"/>
              </InputAdornment>
            ),
            endAdornment: (
              <InputAdornment>
                {() => {
                  if (state.users.password && state.users.password.length() >= 12) {
                    return <CheckCircleIcon color="success" />
                  }
                  return 'Password must be at least 12 characters long!'
                }}
              </InputAdornment>
            )
          }} onChange={(e) => dispatch(createUsers(e.target.value, 'password'))}/>