How to set the content of textarea as content saved before using useEffect

Question

I am trying to make a memo pad using React. I want to type the text in the text area and save it. When the page reopens, I want the saved text to remain in the text area.

I am trying to use react-hook-form but I am stuck in useEffect function. I want to set the textarea in useEffect function by

document.getElementById("memoTextarea").value = memo; 

but this line gives me an error.

Is there anyway to replace the statement?

Below is my code:

import { IonPage, IonContent, IonHeader, IonToolbar, IonTitle, IonItem, IonItemDivider, IonTextarea, IonButton, IonCard, IonLabel, IonSegment, IonSegmentButton} from '@ionic/react';
import React, { memo, useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import './Main.scss';


const Main: React.FC = () => {
    const { handleSubmit, register } = useForm();
    const onSubmit = (memo: any) =>  console.log(memo);
    
    useEffect(() => {
        let x = document.getElementById("memoTextarea");
        x = memo;
    },[memo]);

    return (

        <IonPage className="MainPage">
            <IonHeader>
                <IonToolbar>
                    <IonTitle>Memo pad</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen>
                <IonCard>
                    <form className="memo" onSubmit={handleSubmit(onSubmit)}>
                        <IonItemDivider><IonLabel>Memo</IonLabel></IonItemDivider>          
                        <IonItem>
                            <IonTextarea id="memoTextarea" name="memoTextarea" rows={28} ref={r => register(r)} />
                        </IonItem>
                        <IonButton type="submit" fill="solid">Save</IonButton>
                    </form>
                </IonCard>
            </IonContent>
        </IonPage>)
}

export default Main;