Getting compile error from React Component useState - reactjs

Question

This is the code of the component:
import React, {useState, useEffect} from 'react'
import NavBar from './Navbar'
import axios from 'axios'
import {Link, useHistory} from 'react-router-dom'
function mygroups() {
let profile_id = localStorage.getItem('profile_id')
const [group, setgroup]=useState([])
useEffect(()=>{
axios.get(`/getgroups?profile_id=${profile_id}`)
.then(res=>setgroup(res.data))
.then(res=>{
//localStorage.setItem("screen_name",res.data.screenname)
//localStorage.setItem("profile_id",res.data._id)
})
.catch(err=>console.log(err))
})
return (
<div>
<NavBar />
<h3 className='bg-primary p-2 text-center'>Groups</h3>
{
group.map((data,key)=>(
<div className='container'>
<h2>{data.name}</h2>
<span className='badge badge-dart p-2'>{data.name}</span>
<h6 className='text-white mt-4'>{data.no_members}</h6>
<hr style={{border:'1pz dotted white'}} />
</div>
))
}
</div>
)
}
export default mygroups
This was based off from another component that works perfectly fine. I just changed the variable names. Even when I comment out all of the code and just have the const [group, setgroup]=useState([]), I get this compile error right away. Any help is greatly appreciated. Thanks.

Answer 1

You need to tell React that mygroups is a functional component rather than a regular function, otherwise it won't permit you to use hooks in it. Change
function mygroups() {
to
function Mygroups() {