Starting mix-height about react-collapse HOT 7 CLOSED

import { ReactNode, useCallback, useState } from 'react'
import { StyledMosaic, SeeMore, Wrapper } from './styles'
import { Collapse } from 'react-collapse'

interface MosaicProps {
  children: ReactNode
  limit: boolean
}

export default function Mosaic({ children, limit }: MosaicProps) {
  const [isOpened, setIsOpened] = useState(false) // Handles Collapse
  const [height, setHeight] = useState('500px') // Handles height changes

  const handleClick = useCallback(() => {
    setHeight('auto')
    setIsOpened(!isOpened)
  }, [isOpened])

  return (
    <Wrapper>
      <Collapse isOpened={isOpened}> // Wraps div with 500px height initially
        <StyledMosaic height={height}>{children}</StyledMosaic> // changes height from 500px to auto on click
      </Collapse>
      {limit ? (
        <SeeMore onClick={handleClick}>
          {isOpened ? 'Veja menos' : 'Veja mais'}
        </SeeMore>
      ) : (
        ''
      )}
    </Wrapper>
  )
}

export default function Mosaic({ children }) {
  const [height, setHeight] = useState<number | string>(500)

  const handleClick = useCallback(() => {
    setHeight(height === 500 ? 'auto' : 500)
  }, [height])

  return (
    <Wrapper>
      <Collapse isOpened={true}>
        <div
          style={{ height: height, overflow: 'hidden', position: 'relative' }}
        >
          <StyledMosaic>{children}</StyledMosaic>
        </div>
      </Collapse>
      <SeeMore onClick={handleClick}>
        {height === 500 ? 'Veja mais' : 'Veja menos'}
      </SeeMore>
    </Wrapper>
  )
}