React : Unexpected token '<'

Question

I am using the Palm API to get AI generated questions for a website. First of all, when I run my questionai2.js file, i keep getting the error:

    <div>
    ^

SyntaxError: Unexpected token '<'
    at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:119:18)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:468:14)
    at async link (node:internal/modules/esm/module_job:68:21)

Node.js v18.16.0

Here is the code:

import React, { useEffect, useState } from 'react';
import { google } from 'googleapis';
import { TextServiceClient } from '@google-ai/generativelanguage';
import ReactDOM from 'react-dom/client';

const MODEL_NAME = "models/text-bison-001";
const API_KEY = "this would be my actual api key"; // Replace with your actual API key

export const AiQuestionComponent = () => {
  const [questions, setQuestions] = useState([]);

  useEffect(() => {
    aiGeneratedQuestions().then((generatedQuestions) => {
      setQuestions(generatedQuestions);
    });
  }, []);

  async function aiGeneratedQuestions() {
    console.log('in aiGeneratedQuestions');
    const authClient = new google.auth.GoogleAuth({
      credentials: {
        access_token: API_KEY,
      },
      scopes: ['https://www.googleapis.com/auth/cloud-language'],
    });

    const textServiceClient = new TextServiceClient({
      authClient: await authClient.getClient(),
    });

    const input = ' ';
    const promptString = `input: Write me an AP biology exam with the following guidelines:
    Exam Format
    The AP Biology Exam has question types and point values that remain stable and consistent from year to year, so you and your students know what to expect on exam day.
    Section II: Free Response
    6 Questions | 1 hour 30 Minutes | 50% of Exam Score
    There are 2 long questions and 4 short questions. Long questions are worth 8–10 points each; short questions are worth 4 points each.
    The long questions ask students to:
    Interpret and evaluate experimental results
    Interpret and evaluate experimental results with graphing 
    The short-answer questions assess students’ understanding of the following:
    Scientific investigation
    Conceptual analysis
    Analysis of a model or visual representation
    Data analysis
    stucture questions like this:
    1. question here
    a) b) c) d) (questions 1 through 4)
    structure graphs like this:
    graph^
    |colname1|colname2|colname3
    |data1|data2|data3
    |data4|data5|data6
    input: ${input}
    output:`;

    const stopSequences = [];

    try {
      console.log('in try')
      const result = await textServiceClient.projects.locations.models.generateText({
        parent: MODEL_NAME,
        requestBody: {
          input: promptString,
          model: MODEL_NAME,
          temperature: 0.7,
          maxTokens: 20000,
          stopSequences: stopSequences,
        },
      });

      if (
        result[0] &&
        result[0].candidates &&
        result[0].candidates.length > 0
      ) {
        console.log('after if')
        const generatedText =
          result[0].candidates[0].output || result[0].candidates[0].text;
        console.log(generatedText);
        const questions = generatedText
          .split(/\*\*(Long|Short) Question \d+\*\* \(\d+ points\)/)
          .filter((question) => question.trim() !== '');

        const formattedQuestions = questions.map((question) => {
          const trimmedQuestion = question.trim();
          if (trimmedQuestion.startsWith('Long')) {
            const subQuestions = trimmedQuestion
              .split(/(\d+\.\s+.+)/)
              .filter((subQuestion) => subQuestion.trim() !== '');
            return subQuestions;
          }
          return trimmedQuestion;
        });
        console.log('AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');
        console.log(formattedQuestions);
        return formattedQuestions;
      } else {
        console.log('No generated text found.');
        return [];
      }
    } catch (error) {
      console.error('Error:', error);
      return [];
    }
  }
  return (
    <div>
      <h1>Generated Questions</h1>
      <ul>
        {questions.map((question, index) => (
          <li key={index}>
            <p>{question}</p>
          </li>
        ))}
      </ul>
    </div>
  );
  
};

export default AiQuestionComponent;

The question component goes into my App.js file.

I have a feeling this has something to do with me using react wrong, but I'm not sure. Thanks in advance!