Does my code follow rule: No raw DOM manipulation?

So I was making discord plugin for vencord and just found out they don’t allow DOM manipulation in the code.
I’ve never used React library before so not sure if this is proper way to use it. but I wanna know if the code follows the rule "No raw DOM manipulation, use proper patching and React".
and if there are any mistakes or better ways to write it, please let me know.

<div id="app-mount">
    <div class="layerContainer_cd0de5">
        <div class="imageWrapper_d4597d"> 
            <img class="slide_f97a12"  alt="Image"> 
            <video class="embedVideo_b0068a"></video>
        </div>
        <div class="optionsContainer_a15d41"></div> 
    </div>
</div>

function App() {
    const [imgWrapperStyle] = useState({
        width: '100vw',
        height: '100vh',
        marginTop: '20px',
    });

    const [optionsContainerStyle] = useState({
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        flexWrap: 'nowrap',
        marginTop: '8px',
        gap: '30px',
    });

    const [mediaStyle] = useState({
        width: '100%',
        height: '100%',
        maxWidth: '100%',
        maxHeight: '100%',
        objectFit: 'contain',
    });

    return (
        <div className="layerContainer_cd0de5">
            <div className="imageWrapper_d4597d" style={imgWrapperStyle}>
                <img className="slide_f97a12" style={mediaStyle} alt="Image" />
                <video className="embedVideo_b0068a" style={mediaStyle}></video>
            </div>
            <div className="optionsContainer_a15d41" style={optionsContainerStyle}></div>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('app-mount'));

You need to sign in to view this answers