I get this error

get @ @google-cloud_vision.js?t=1718885447253&v=dfd5bd38:24811
Show 1 more frame
Show less
@google-cloud_vision.js?t=1718885447253&v=dfd5bd38:24910 Uncaught TypeError: Class extends value undefined is not a constructor or null
at node_modules/google-auth-library/build/src/auth/authclient.js (@google-cloud_vision.js?t=1718885447253&v=dfd5bd38:24910:45)
at __require2 (chunk-WGAPYIUP.js?v=dfd5bd38:19:50)
at node_modules/google-auth-library/build/src/auth/oauth2client.js (@google-cloud_vision.js?t=1718885447253&v=dfd5bd38:25051:24)
at __require2 (chunk-WGAPYIUP.js?v=dfd5bd38:19:50)
at node_modules/google-auth-library/build/src/auth/computeclient.js (@google-cloud_vision.js?t=1718885447253&v=dfd5bd38:25700:26)
at __require2 (chunk-WGAPYIUP.js?v=dfd5bd38:19:50)
at node_modules/google-auth-library/build/src/auth/googleauth.js (@google-cloud_vision.js?t=1718885447253&v=dfd5bd38:29193:27)
at __require2 (chunk-WGAPYIUP.js?v=dfd5bd38:19:50)
at node_modules/google-auth-library/build/src/index.js (@google-cloud_vision.js?t=1718885447253&v=dfd5bd38:30145:24)

I have carefully followed this documentation
here is my code

import React, { useState } from 'react';
import vision from '@google-cloud/vision'

const Scan = () => {
  const [imageFile, setImageFile] = useState(null);
  const [text, setText] = useState('');

  const keyFilename = '../../../../CloudVision.json'; 


  const handleImageChange = (event) => {
    const newImageFile = event.target.files[0];
    setImageFile(newImageFile);
  };

  const detectText = async () => {

    if (!imageFile) {
      return;
    }

    try {
      const client = new vision.ImageAnnotatorClient({
        keyFilename,
      });

      const [result] = await client.textDetection(imageFile);
      const fullTextAnnotation = result.fullTextAnnotation;
      setText(fullTextAnnotation.text);
    } catch (error) {
      console.error('Error:', error);
      // Handle errors appropriately (e.g., display an error message)
    }`your text`
  };



  return (
    <div id='Scan'>
        <input type="file" accept="image/*" onChange={handleImageChange} />
        <button onClick={detectText}>Detect Text</button>
        {text && <p>Extracted Text: {text}</p>}
    </div>
  );
};

export default Scan;