TypeError: Cannot read properties of undefined (reading ‘jsx’)

I have just started developing a new WP block which will use some React for the frontend.

However in my browser console I was getting the error: TypeError: Cannot read properties of undefined (reading 'jsx') and my React component wasn't being outputted to the page.

I solved the error by adding 'wp-blocks' as an dependency when enqueuing the files for the front end, however I am not sure this is standard practice as I thought wp-blocks was only for when working with the Gutenberg editor JS.

So my question is – is it correct to be enqueuing 'wp-blocks' for the front end for a React component or is there a different approach I should be taking? My WP dev install is using React 18.3.1. wp 6.6.1

Here is my front end code:

import * as React from 'react'
import { createRoot } from 'react-dom/client';
import "./frontend.scss";

const divsToUpdate = document.querySelectorAll(".paying-attention-update-me");

divsToUpdate.forEach(function (div) {
  createRoot(div).render(<Quiz />)
  div.classList.remove("paying-attention-update-me");
});

function Quiz() {
  return (
    <div className="paying-attention-frontend">
      Hello From React.
    </div>
  )
}