封装ReactBootstrap组件实现文字展开功能

import React, { useRef, useEffect, useState } from "react";
import { Container, CardGroup, Card, Row, Col, Button} from "react-bootstrap";
import styles from '@/styles/Home.module.css'

const MAX_POSSIBLE_HEIGHT = 500;

  
  const ExpendableText = ({ maxHeight, children }) => {
    const ref = useRef();
    const [expanded, setExpanded] = useState(true);
  
    useEffect(() => {
      if (ref.current.scrollHeight > maxHeight) {
        setExpanded(false);
      }
    }, [maxHeight]);
  
    return (
      <Card.Text as="h6" style={styles.cardText} ref={ref}>
        <div
          style={{ maxHeight: expanded ? MAX_POSSIBLE_HEIGHT : maxHeight, overflowY: 'hidden' }}
        >
          {children}
        </div>
        {expanded ? <Button variant="light" onClick={() => setExpanded(!expanded)}>Read Less</Button> :
                    <Button variant="light" onClick={() => setExpanded(!expanded)}>Read More</Button>}
      </Card.Text>
    );
  };

export default ExpendableText

<ExpendableText maxHeight={70}>
GrassROOTS Community Foundation (GCF) is a training organization with an emphasis on public health and social action. We invest in our community members' collective well-being, and teach them how to use their healthy energy to transform themselves, their families and communities. 
We support, develop and tailor wellness programs for women and girls, particularly those who grew up in economic distress. We also advocate for policies and practices that reduce racial and gender disparities and foster equity.
</ExpendableText>