Uncaught TypeError: setFlag is not a function

In Windows 10 , I’m using react-router-dom 5.2.0 and react-redux 7.2.5 and react 17.0.2 and axios 0.21.4 and WebStorm 2023.1.3 IDE

success_user_activation_screen.js:

import React , {useEffect , useState} from "react";
import "../css_for_activation_user_screen.css";
import {LinkContainer} from 'react-router-bootstrap';
import {Link , useHistory , useLocation ,useParams} from "react-router-dom";
import {useSelector, useDispatch} from "react-redux";
import {setFlagAction} from "../actions/userActions";
import dayjs from "dayjs";
import jwt_decode from "jwt-decode";

function SuccessUserActivationScreen() {
    const dispatch = useDispatch();
    const location = useLocation();
    const history = useHistory();
    const setMyFlag = useSelector((state) => state.setFlag);
    const {loading , setFlagInfo , error} = setMyFlag;
    const userLogin = useSelector((state) => state.userLogin);
    const userLoginError = userLogin.error;
    const userLoginLoading = userLogin.loading;
    const userInfo = userLogin.userInfo;
    const redirect='/profile';
    const {flag , setFlag} = useState(false);
    const {timeOut, setTimeOut} = useState(false);
    if ((userInfo) && (setFlagInfo.flagSuccess)) {
        history.push('/profile');
    }
    if (!(userInfo)) {
        let i = 0;
        while (i < 30) {
               i += 1;

            }
        setTimeOut(() => true);

        }
    const user = jwt_decode(userInfo.token);
    const isExpired = dayjs.unix(user.exp).diff(dayjs()) < 4*60*1000;
    const onClickFlag = () => {
        setFlag(() => true);
        dispatch(setFlagAction(flag));
        history.push('/profile');

    }

    useEffect(() => {

            if ((!(userInfo)) && timeOut) {
                history.push('/login');
            }


            if (isExpired) {
                history.push('/profile');
            }

    }, [isExpired , timeOut ])
    return (
       <>
           {/*<div className="text-center">*/}

           {/*    <a href="#myModal" role="button" className="btn btn-info text-white" data-toggle="modal">Click to Open your activation status</a>*/}
           {/*</div>*/}


           <div id="myModal" className="modal fade show" style={{display:"block", border:"1px #14A44D solid"}}>
               <div className="modal-dialog modal-confirm" style={{border:"4px #14A44D solid"}}>
                   <div className="modal-content">
                       <div className="modal-header">
                           <div className="icon-box">
                               <i className="material-icons">&#xE876;</i>
                           </div>
                           <h4 className="modal-title w-100">Activate!</h4>
                       </div>
                       <div className="modal-body">
                           <p className="text-center">please check your profile</p>
                       </div>
                       <div className="modal-footer">
                           <a role="button" onClick={() => onClickFlag()} className="btn btn-success btn-block" >profile</a>
                           {/*<Link role="button" className="btn btn-success btn-block" data-dismiss="modal">close</Link>*/}
                       </div>
                   </div>
               </div>
           </div>
       </>
    )
}

export default SuccessUserActivationScreen;

In this react component above i use useState() from "react" module so i have const {flag , setFlag} = useState(false); -> in handle onClick button by <a role="button" onClick={() => onClickFlag()} className="btn btn-success btn-block" >profile</a> -> run this arrow function :

 const onClickFlag = () => {
        setFlag(() => true);
        dispatch(setFlagAction(flag));
        history.push('/profile');

    }

But when runing code get line that contains setFlag(() => true); -> raise error Uncaught TypeError: setFlag is not a function.
I don’t understand problem , in this code all things are right but at line setFlag(() => true); raise error above. please help me solve it , thanks.

>Solution :

You are using curly braces {} instead of parentheses () when using the useState hook.

// Change this line

const { flag, setFlag } = useState(false);

// To this line

const [flag, setFlag] = useState(false);