React - expand div, click to read more

Question

import React, { useState } from 'react';
import Router from 'next/router';
// import ReadMoreReact from 'read-more-react'; 

function AgentDescr(props) {
  const { data } = props;
  const agentBiz = data.agent ? data.agent.bizname_t : '';  
  const agentDesc = data.agent ? data.agent.agent_desc_t : '';  
  // const descWrap = agentDesc;
  // const maxLength = 250;
  // const idealLength = 200;
  // const minimumLength = 180;
  // const readMoreText = 'read more...';
  const [isShowMore, toggleShowMore] = useState(false);
  const onShowMore = () => {
    toggleShowMore(true);
  };

  return (
    <div className="ag-desc">
      <div className="row">
        <div className="col-12 text-center border-top-1">
          <h2>About {agentBiz}</h2>
        </div>
      </div>
      <pre className="desc-data noscroll-xy">      
        {agentDesc && (
          <div>
            <div
              className={
                isShowMore
                  ? 'agent-desc-data show-more'
                  : 'agent-desc-data'
              }
            > 
              <div 
                dangerouslySetInnerHTML={{ __html: agentDesc }}
              />
              {/* <pre className="agent-desc-data">{agentDesc}</pre>  */}
            </div>
            {!isShowMore && (
              <div>
                <button
                  type="button"
                  className="btn btn-link show-more-button"
                  onClick={onShowMore}
                >
                  Show More
                </button>
              </div>
            )}
          </div>
        )}
      </pre>  
    </div>
  );
}

export default AgentDescr;