Here’s my code

const ReadMore = ({children}) => {
    const text = children;
    const [isReadMore, setIsReadMore] = useState(true);
    const toggleReadMore = () => {
        setIsReadMore(!isReadMore);
    };
    return (
        <>
          <p className={`text ${!isReadMore ? "expanded" : ""}`}>
              {isReadMore  ? text[0] : text}
              <span
                  onClick={toggleReadMore}
                  className={`read-or-hide ${!isReadMore ? "expanded" : ""}`}
                  style={{ color: "#00ADB5", cursor: 'pointer'}}
              >  
                  {isReadMore ? "Position Activities" : " show less"}
              </span>
          </p>
        </>
    );
  };
  
  export default function Experience() {
    
    return (
      <>
        <div className='main_div_experience_section'>
          <div className='experience_h1'>
            <span className='text-6xl font-bold text-white'>
              Experience
            </span>
          </div>
          <div className='parent_section'>
            <div className='rectangle'>
              <div className='grid'>
                <div className='col1'>
                  <div className='years_experience'><p>Sep 2023 - Present</p></div>
                </div>
                <div className='col2'>
                  <div className='text_company'>
                    <div className='grouper_name_and_logo'>
                      <div className='img_div_experience'>
                          <a href="home">
                            <img src={Nymbus} alt="" className='company_img_experience' href="home"/>
                          </a>
                      </div>
                      <h1 className='role_experience text-gray-400 text-xl font-normal'>
                        Full Stack Developer - asdfasdf
                      </h1>
                    </div>
                    <ReadMore>
                      <div className={`role_explanation_experience`}>
                        <ul>
                          <p className='my_p_experience'>Daily Activities:</p>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                          <p className='following_p_experience'>Achievements:</p>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                        </ul>
                      </div>
                    </ReadMore>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </>
    )
  }

The function ReadMore is basically a read more section that can increase or decrease by clicking on the <p> tag. However, I’ve been getting the warning “Warning: validateDOMNesting(…): <ul> cannot appear as a descendant of <p>.” and I’d like to fix that.

Furthermore, I’d like to add the functionality to add a transition for my ReadMore function, but I just can’t get it to work, I’ve been thinking is because of the warning (maybe?)

I’d pretty much appreciate your help or recommendations.

I’ve tried

• Modified ReadMore function
• Added CSS for transition functionality