Parsing error: 'return' outside of function

Question

I've recently started maintaining JavaScript code and now i am facing trouble in the returning function in line 39. Can someone please help? I have checked the syntax and can't find anything wrong................................................................???????????????????????????????????????????????????????????????????????

import React, { useState, useEffect}  from "react";
import axios from "axios";
import { renderMatches, useNavigate, useParams, } from "react-router-dom";

const Editorg = () => {

  let navigate = useNavigate();
  const {id} = useParams();
console.log(id);

  const [user, setUser] = useState ({
          name:"",
          poname:"",
          type:"",
          ostatus:"",
  });
      const { name, poname, type, ostatus } = user;
      const onInputChange = e => {
          setUser({...user, [e.target.name]: e.target.value });
      };

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

      };

      const onSubmit = async e => {
          e.preventDefault();
          await axios.put( 'http://localhost:3001/users/${id}' , user);
          navigate.push("/");
      };

      const loadUser = async () =>{
        const result = await axios.get('http://localhost:3001/users/${id}', user);
        setUser(result.data);
      };
   
     return ( 
      
    <div className="container">
   
  

    <div className="w-75 mx-auto shadow p-5">
    <h5 className="text-left mb-4"> Edit Organization </h5>
    <form onSubmit={e => onSubmit(e)}>
    
    <div className="form-group">
          <label> Organization Name </label>
          <input type="text" className="form-control" name="name" value={name} 
            onChange={e => onInputChange(e)}
          />
        </div>

       

        <div className="form-group">
          <label> Parent Organization Name </label>
          <input type="text" className="form-control" name="poname" value={poname} 
            onChange={e => onInputChange(e)}
          />
        </div>

    

        <div className="form-group">
          <label> Type </label>
          <input type="text" className="form-control" name="type" value={type} 
            onChange={e => onInputChange(e)}
          /></div>

  

          <div className="form-group">
          <label> Organization Status </label>
          <input type="text" className="form-control" name="ostatus" value={ostatus} 
            onChange={e => onInputChange(e)}
          /></div>

     <div className="container">
     <div className="btn-6">
     <button className="btn btn-danger float-right">Update</button>
     </div>
     </div>

      </form>
      </div>
      </div>        
   );
 

}

Answer 1

Around line 26 you are closing the function too early.

    useEffect(() => {
      loadUser();
    }, []); 
    
    }; // <- Move this to the very end
    
    const onSubmit = async e => {

      </div>
      </div>        
   );
 }; // <- Move to here

Answer 2

You mistakly add extra termination of curly bracket

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

      }; //  <--- remove this