Why am i getting this error using the useeffect hook?

Question

So I`m following this tutorial https://www.youtube.com/watch?v=WDTNwmXUz2c&t=4351s and I'm stuck in the minute 1:10 because when I use the useEffect hook I get this error: Uncaught (in promise) TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.useEffect) is not a function.

This is how my App.js file looks right now:

import logo from './logo.svg';
import {createContext, useState, useEffect} from 'react';
import './App.css';
import Board from './Components/Board';
import Keyboard from './Components/Keyboard';
import { boardDefault, generateWordSet } from './Words'

export const AppContext = createContext();

function App() {
  const[board, setBoard] = useState(boardDefault);
  const[currAttempt, setCurrentAttempt] = useState({attempt: 0, letterpos: 0});
  const[wordSet, setWordSet] = useState(new Set());
  var WordleBank;

  const correctWord = "RIGHT";

  useEffect(() => {
    generateWordSet().then((words) => {
      setWordSet(words.wordSet);
    });
  }, []);


  const onSelectLetter = (keyVal) =>{
    if(currAttempt.letterpos > 4 ) return;

    const currBoard = [...board];
    currBoard[currAttempt.attempt][currAttempt.letterpos] = keyVal;
    setBoard(currBoard)
    setCurrentAttempt({...currAttempt, letterpos: currAttempt.letterpos+1})
  }
  const onDelete = () =>{
    if(currAttempt.letterpos == 0) return;
    const currBoard = [...board];
    currBoard[currAttempt.attempt][currAttempt.letterpos - 1] = "";
    setBoard(currBoard);
    setCurrentAttempt({...currAttempt, letterpos: currAttempt.letterpos-1})  }
  const onEnter = () =>{
    if(currAttempt.letterpos != 5) return;
    let currWord = "";
    for(let i = 0; i < 5; i++){
      currWord += board[currAttempt.attempt][i];
    }
    if(wordSet.has(currWord.toLowerCase()))
        setCurrentAttempt({attempt: currAttempt.attempt+1, letterpos: 0})
    else{
      alert("Word not found.")
    }
  }
  return (
    <div className="App">
      <nav>
        <h1>
          Wordle
        </h1>
      </nav>
      <AppContext.Provider value={{board, setBoard, currAttempt, setCurrentAttempt, onSelectLetter, onDelete, onEnter, correctWord}} >
        <div className="game">
          <Board />
          <Keyboard />
        </div>
      </AppContext.Provider>
    </div>
  );
}

export default App;

and my Words.js file, which is used to generate the function to create the set of possible words.

import WordBank from './wordle-bank.txt'

export const boardDefault  = [
    ["", "", "", "", ""],
    ["", "", "", "", ""],
    ["", "", "", "", ""],
    ["", "", "", "", ""],
    ["", "", "", "", ""],
    ["", "", "", "", ""]];

export const generateWordSet = async () => {
    let wordset;
    await fetch(WordBank)
    .then((response) => response.text())
    .then((result) => {
        const wordArr = result.split("\n");
        wordset = new Set(wordArr);
    })

    return { wordset };
}