I’m currently building a resume builder which mimics the exact functionality of a word document.

One of the features include when users reach the bottom of the page, it should create a new page and start writing content in there.

How can i achieve this ?

My current builder component returns something like this

  <div ref={pageRef} className="w-[22cm] h-[29.7cm] bg-white border my-6 mx-auto rounded drop-shadow-2xl py-[32px] px-[44px] ">
    <PageHeader userData={userData} handleUserData={handleUserData} />

    <Section title="Experience" handleAdd={addExperience}>
      <WorkExperienceList />
    </Section>

    {/* Work Experience */}
    <Section title="Education" handleAdd={addEducation}>
      {education.map((eduData, index) => (
        <Education key={index} eduData={eduData} handleEducation={handleEducation} handleStartDate={handleEduStartDate} handleEndDate={handleEduEndDate} />
      ))}
    </Section>
  </div>