auto-animate, syntax higlighting fail in simple React app

[pinkboid]

I am unable to get auto-animate and syntax highlighting working with code snippets when integrating into React. Screencap at https://imgur.com/a/dmz0kb1, repo at https://github.com/pinkboid/revealjs-react-test

Detailed my problem at issue #3473, no responses and still no luck. I want to use this library in my app, but am feeling like it's just not usable. I would really appreciate it if anyone can help me get this working, and will happily contribute documentation to the project afterwards.

Made a new simple react app using npm create vite@latest (this time in plain JS, mentioned issue post was in TS)

Presentation.jsx

import * as React from "react";
import Reveal from 'reveal.js';

import 'reveal.js/dist/reveal.css';
import 'reveal.js/dist/reveal.css';
import 'reveal.js/dist/theme/white.css';

export function Presentation() {

    React.useEffect(() => {
        let deck = new Reveal({
            // backgroundTransition: 'slide',
            // transition: 'slide'
            embedded: true,
         })
         deck.initialize();
         console.log('initialized fool')
    },[])

    return (
        <div className="reveal">
            <div className="slides">
                <section>
                    <section data-auto-animate>
                        <pre data-id="codee"><code data-trim data-line-numbers>
{`class Main {
    run() {

    }
}`}
                        </code></pre>
                    </section>
                    <section data-auto-animate>
                        <pre data-id="codee"><code data-trim data-line-numbers>
{`class Main {
    run() {
        const user = input()
    }
}`}
                        </code></pre>
                    </section>
                </section>
            </div>
        </div>
    );
}

App.jsx

import { Presentation } from './Presentation'

function App() {
  return <Presentation />
}

export default App

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

index.css

.reveal {
    height: 800px;
    width: 800px;
    border: 1px solid blue;
}

[pinkboid]

Solved at 3473. Incorrectly imported Highlight plugin, did not import css theme for highlight, and needed to disable double rendering in react development.