Textarea redactor in NEXT.js

I have an administration panel through which the user can edit promotions on the site . My project on NEXT.js (React). I want to make an independent text editor, which will have paragraphs, fonts and font styles. I haven't dealt with this before, because I'm a beginner. At this stage I am trying to get the highlighted text and make it bold for example. Tell me how it is implemented:

const [selectText, setSelectText] = useState('')
const textRef = useRef(null);

function consolText() {
    let cursorStart = textRef.current.selectionStart;
    let cursorEnd = textRef.current.selectionEnd;
    setSelectText(textRef.current.value.substring(cursorStart, 
    cursorEnd))
}
   

Option 2

    const [selectText, setSelectText] = useState('')
    const [selectTextAnswer, setSelectTextAnswer] = useState('')
    const [cursorStart, setCursorStart] = useState('')
    const [cursorEnd, setCursorEnd] = useState('')
    const textRef = useRef(null);

    function consolText() {
        setCursorStart(textRef.current.selectionStart);
        setCursorEnd(textRef.current.selectionEnd);
        setSelectTextAnswer(textRef.current.value.substring(cursorStart, cursorEnd))
        console.log(selectTextAnswer)
    }

html

 <textarea ref={textRef} value={selectText}  onChange={e =>setSelectText(e.target.value)}</textarea>
    <button onClick={consolText}>selectText</button>

My error I get the highlighted value, but I have to press the button twice in a row and it needs to be reset then ? and how to make the selected section for example fdf

Or maybe someone is working with suneditor

Thanks