I’m getting this error:
“Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app”

And am struggling to understand why, as useEffect is being used within my react component

dealHand is really simple and just pushes two strings into the dealerHand and playerHand, and works outside of useEffect. I just wanted to use useEffect because without it, dealHand is called twice when the component is rendered.

import React, { useEffect } from "react";
import { createRoot } from "react-dom/client";
import { useAtom } from "jotai";
import { playerHandAtom, dealerHandAtom } from "./atoms";
import { dealCard, dealHand } from "./helpers/dealer";

const BlackJack = () => {
  const [dealerHand, setDealerHand] = useAtom(dealerHandAtom);
  const [playerHand, setPlayerHand] = useAtom(playerHandAtom);

  useEffect(() => {
    dealHand();
  }, []);

  return (
    <div id="game-container">
      <img id="game-board" alt="Green Blackjack poker table" src={board} />
    </div>
  );
};

I tried downgrading my dependencies as it said mismatched versions could be the issue as well, but that didn’t work and I want to keep it at React 18 or higher because I’m using createRoot.
Here are my current dependencies:

"jotai": "^2.8.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.23.0"

Thanks all