javascript - Add a React search box to blog home error - Cannot read properties of undefined (reading 'jsx')

I have followed a couple of tutorials online in the pursuit of adding a react component to my WP page.

I have gone over and over it for errors and I cant see what I must be missing, as the console throws the following error and the simple element is rendering to the page.

Uncaught TypeError: Cannot read properties of undefined (reading 'jsx')

From the console

s(338).createRoot(document.querySelector("#react-search")).render((0,
            a.jsx)(o, {}))

Project structure

src/
-- index.js
-- scripts/
-- -- ReactSearch.js
functions.php
home.php

index.js

// Styles
import "../css/style.scss"

// Scripts
import ReactSearch from "./scripts/ReactSearch"
import React from "react"
import ReactDOM from "react-dom/client"

const root = ReactDOM.createRoot(document.querySelector("#react-search"))
root.render(<ReactSearch />)

ReactSearch.js

import React from "react"

function ReactSearch() {

  return (
    <div className="card bg-secondary w-100 mb-3">
      <div className="card-header border-bottom py-3">
        Search the blog
      </div>
      <div className="card-body">
        <form role="search">
          <div className="input-group">
            <span className="input-group-text bg-slate-400"><i className="bi bi-search"></i></span>
            <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"></input>
          </div>
        </form>
      </div>
      <div className="mt-0 pt-0 d-none">
        <ul className="list-group list-group-flush bg-secondary mb-3">
          <li className="list-group-item bg-secondary">Post example from search</li>
          <li className="list-group-item bg-secondary">Post example from search</li>
          <li className="list-group-item bg-secondary">Post example from search</li>
          <li className="list-group-item bg-secondary">Post example from search</li>
        </ul>
        <button className="btn btn-outline-danger ms-3 mb-3">Close Search</button>
      </div>
    </div>
  )
}

export default ReactSearch   

home.php

// Only showing the div I am using as the root for the ReactSearch
<div id="react-search"></div>

I have tried so many changes to the structure and imports based on online tutorials now its becoming a real pain to use react in WP and I know it shouldn't be. If someone could point me in the right direction that would be great.