return (
    <Accordion
      isCompact
      hideIndicator
      onExpandedChange={onExpandedChangeCallback}
    >
      <AccordionItem
        key='1'
        isCompact
        aria-label={isExpanded ? 'Hide Form' : 'Show Form'}
        title={isExpanded ? 'Hide Form' : 'Show Form'}
        classNames={{
          title: 'text-center hover:opacity-hover',
        }}
      >
        <form
          className='mx-auto'
          action={createTransactionWithUserId}
          onSubmit={onSubmitCallback}
        >
          <Switch
            color='success'
            name='isIncome'
            value='isIncome'
            aria-label='Income Switch'
            onValueChange={onSwitchChangeCallback}
          >
            Income
          </Switch>
          <Input
            type='text'
            name='description'
            aria-label='Description'
            required
            size='lg'
            color={isSwitchedOn ? 'success' : 'danger'}
            placeholder={
              isSwitchedOn
                ? 'Type income transaction...'
                : 'Type expense transaction...'
            }
            classNames={{
              input: 'border-none focus:ring-0 placeholder:text-default-500',
              inputWrapper: 'h-20 my-2',
            }}
            endContent={
              <Input
                type='text'
                name='amount'
                aria-label='Amount'
                required
                maxLength={6}
                pattern='\d+'
                inputMode='decimal'
                placeholder='0'
                size='lg'
                classNames={{
                  input:
                    'border-none focus:ring-0 placeholder:text-default-500 text-center',
                  inputWrapper: 'h-12 w-full',
                  base: 'w-36',
                }}
                endContent={
                  <div className='pointer-events-none flex items-center'>
                    <span className='text-md text-lg text-default-500'>
                      {CURRENCY_SIGN}
                    </span>
                  </div>
                }
              />
            }
          />
          <div className='flex justify-between'>
            <div className='flex items-center gap-2'>
              <div className='flex w-full flex-wrap gap-4 md:flex-nowrap'>
                <Select
                  name='category'
                  aria-label='Category'
                  className='w-52'
                  defaultSelectedKeys={[DEFAULT_CATEGORY]}
                >
                  {categories.map((category, idx, arr) => (
                    <SelectSection
                      key={category.target}
                      showDivider={idx !== arr.length - 1}
                      title={category.target}
                    >
                      {category.items.map((item) => (
                        <SelectItem key={item.name}>
                          {`${item.emoji} ${item.name}`}
                        </SelectItem>
                      ))}
                    </SelectSection>
                  ))}
                </Select>
              </div>
            </div>
            <div className='flex items-center'>
              <p className='text-sm text-default-500'>
                Press{' '}
                <button
                  aria-label='Enter'
                  type='submit'
                  className='cursor-pointer'
                >
                  <Kbd keys={['enter']}>Enter</Kbd>
                </button>{' '}
                to Add Transaction
              </p>
            </div>
          </div>
        </form>
      </AccordionItem>
    </Accordion>
  )