Im currently working in a codeEditor.This is NextJs backend code.Here i want to execute useEffect() hook single time at the first time when page get loads.But it is executing two time causing sendEmail(blob) in line 20 to be rendered twice.What is problem here?Can’t get off this problem

import React, { useState, useEffect } from 'react';

const Completed = ({ imageURL, file, downloadFile, email }) => {
  const [fileContent, setFileContent] = useState(null);
  
  
  useEffect(() => { //This was expected to run only once
    const fetchDataAndSendEmail = async () => {
      try {
        if (imageURL) {
          // Fetch the image content from the imageURL
          const response = await fetch(imageURL);
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          const blob = await response.blob();
          setFileContent(blob);

          // Send email after fetching the file content
          sendEmail(blob);
        }
      } catch (error) {
        console.error('Error fetching file:', error);
      }
    };
    fetchDataAndSendEmail(); 
  }, []);

  const handleDownloadClick = () => {
    if (fileContent) {
      const link = document.createElement('a');
      link.href = URL.createObjectURL(fileContent);
      link.target = '_blank';
      link.download = file.name;
      link.click();
    }
  };

  const baseURL = "http://localhost:8000";
  const sendEmail = async (blob) => {
    if (blob) {
      const formData = new FormData();
      formData.append('file', blob, file.name);
      formData.append('email', email);

      try {
        const res = await fetch(`${baseURL}/sendEmail`, {
          method: "POST",
          body: formData,
        });

        if (res.ok) {
          alert("Sent Successfully!");
        } else {
          console.error('Error:', res.statusText);
          alert("Error sending email");
        }
      } catch (error) {
        console.error('Error:', error);
        alert("Error sending email");
      }
    } else {
      alert("No file content to send");
    }
  };

  return (
    <div>
      <div>
        <h1 className='text-xl font-semibold text-white'>Download your answer and review your code</h1>
      </div>
      <div className='mt-4'>
        <button
          className='text-lg bg-red-700 border border-teal-700 rounded-lg text-white hover:bg-teal-700 px-2'
          onClick={downloadFile}
        >
          Click Here
        </button>
        <button
          className='text-lg bg-red-700 border border-teal-700 rounded-lg text-white hover:bg-teal-700 px-2'
          onClick={handleDownloadClick}
        >
          Download CV
        </button>
        <h1 className='text-red-100'>Your CV has been received by HR of codeIT. Stay tuned! You will get a call for an interview.</h1>
      </div>
    </div>
  );
};

export default Completed;

I have treid moving fetchDataAndSendEmail() function to move outside of useEffect hook and call it inside the hook as

 useEffect(() => {
    
    fetchDataAndSendEmail(); 
  }, []);
  const fetchDataAndSendEmail = async () => {
    try {
      if (imageURL) {
        // Fetch the image content from the imageURL
        const response = await fetch(imageURL);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const blob = await response.blob();
        setFileContent(blob);

        // Send email after fetching the file content
        sendEmail(blob);
      }
    } catch (error) {
      console.error('Error fetching file:', error);
    }
  };

But is again is not solving a problem.
THANK YOU VERY MUCH in advance