Is there any way to access modify css classes without useRef() in React?

I have a react component of an editor and I’m trying to change the position of a tooltip according to pixel bounds … however, I’m not exactly rendering the tooltip myself and it’s happening inside the component.

import React, { useRef, useEffect } from 'react';
import Quill from 'quill';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import './styles.css'

interface Props {
  content: string;
  onChange: (value: string) => void;
}

const Editor2: React.FC<Props> = ({ content, onChange }) => {
    const editorRef = useRef<HTMLDivElement>(null);
    const toolbarRef = useRef<HTMLDivElement>(null);
    const [selected, setSelected] = React.useState<string>("lol");

    useEffect(() => {
        if (editorRef.current) {
            const editor = new Quill(editorRef.current, {
                theme: 'bubble',
                modules: {
                    
                    toolbar: [
                        ["bold", "italic", "underline", "strike"],
                        ["blockquote", "code-block"],
                        [{ header: 1 }, { header: 2 }],
                        [{ list: "ordered" }, { list: "bullet" }],
                        [{ script: "sub" }, { script: "super" }],
                        [{ indent: "-1" }, { indent: "+1" }],
                        [{ direction: "rtl" }],
                        [{ align: [] }],
                        ["clean"],
                    ],
                },
            });

            editor.on('text-change', () => {
                onChange(editor.root.innerHTML);
            });

            editor.root.style.backgroundColor = 'white';
            editor.root.style.width = '100%';
            editor.root.style.color = 'black';


            editor.root.addEventListener('mouseup', () => {
                const selection = editor.getSelection();
                if (selection && selection.length > 0 && toolbarRef.current?.style) {
                    const bounds = editor.getBounds(selection.index, selection.length);
                } else {
                    // toolbarRef.current.style.display = 'none';
                }
            });
        }
    }, []);

    return (
        <>
            <div className='ql-toolbar' style={{position: 'absolute'}} ref={toolbarRef} />
            <div style={{width: '768px', marginTop: '15rem'}}>
                {/* <div ref={toolbarRef} className="editor-toolbar">
                <button onClick={handleLink}>Link</button>
            </div> */}
                <div ref={editorRef} />
                {selected}
            </div>
        </>
    );
};

export default Editor2;

I want to set the top of ql-toolbar to a certain bound, but I don’t know how to attach the useRef to that element (it’s coming from within the react quill library)

is there anyway to modify this and access that top attribute?