react.js how can I autofocus a contentEditable element

How can I set focus on a contentEditable element in react? I have found a lot pages anout the subjet, but cant get it to work.

Sample code:

import React, { useRef, useEffect } from 'react';

const About = () => {
    const inputRef = useRef(null);

    useEffect(inputRef => {
        if (inputRef) {
            inputRef.focus();
        }
    }, []);

    return (
        <div className="about">
            <h2>About</h2>

            <p className="paragraph"
                contentEditable={true}
                suppressContentEditableWarning={true}
                spellCheck={false}
                ref={inputRef}
            >
                Hello
            </p>

        </div >
    )
}

export default About;

Looks like my solution is this.

 import React, { useRef, useEffect } from 'react';

const About = () => {
    const inputRef = useRef(null);

    useEffect(() => {
        inputRef.current.focus();
    }, [inputRef]);

    return (
        <div className="about">
            <h2>About</h2>

            <p className="paragraph"
                contentEditable={true}
                suppressContentEditableWarning={true}
                spellCheck={false}
                ref={inputRef}
            >
                Hello
            </p>

        </div >
    )
}

export default About;