Realmente no entiendo por qué mi componente no funciona. Quiero crear un componente que se expanda/contraiga al hacer clic en el botón. Funciona bien, pero tengo un problema con la animación. Cuando hago clic en el botón, el sitio web se bloquea. Este es mi componente:

 import { useState, useRef, React } from 'react' const Collapsible = ({ desc, text }) => { const [isOpen, setIsOpen] = useState(false); const parentRef = useRef(); return ( <div className='city'> <button className='toggle-btn' onClick={()=> { setIsOpen(!isOpen); }}>{text}</button> { isOpen && <div className="city-info" ref={parentRef} style={isOpen ? { height: parentRef.current.scrollHeight + "px", }:{ height: "0px", }} >{desc}</div>} </div> ) } export default Collapsible

Y este es el error que me sale:

 Uncaught TypeError: Cannot read properties of undefined (reading 'scrollHeight')

¿Por qué es indefinido? Después de mucho tiempo de intentar hacerlo yo solo, me rendí e hice un paso a paso con tutorial y funciona muy bien en el tutorial.