Component.jsx

import { useCollapsible } from '../hooks/useCollapsible'

export const Component = ({}) => {

  const {
    isOpen: isCredentialsOpen,
    toggle: toggleCredentials,
    height: collapsableCredentialsHeight,
    ref: collapsableCredentialsRef
  } = useCollapsible()
  
    return ( 
    <>
      <h4 onClick={toggleCredentials}>
        <span style={{ width: '16px', display: 'inline-block' }}>
          {isCredentialsOpen ? '▼' : '►'}
        </span>
        Credentials
      </h4>
      <div
        ref={collapsableCredentialsRef}
        style={{
          height: collapsableCredentialsHeight,
          overflow: 'hidden',
          transition: 'height 0.3s ease-out'
        }}
      >
        content
      </div>
    </>
  )
}

useCollapsible.js

import { useState, useEffect, useRef } from 'react'

export const useCollapsible = () => {
  const [isOpen, setIsOpen] = useState(false)
  const [height, setHeight] = useState(0)
  const collapsableContentRef = useRef(null)

  const toggle = () => {
    setIsOpen((prev) => !prev)
  }

  useEffect(() => {
    if (collapsableContentRef.current) {
      setHeight(isOpen ? collapsableContentRef.current.scrollHeight : 0)
    }
  }, [isOpen])

  return { isOpen, toggle, height, ref: collapsableContentRef }
}