Button click always renders the previous state useState hook React Js

Question

I am using below mentioned code to change the state on click of the button by executing the onSubmit function. I am using useEffect hook to re render on each state change but still whenever button is clicked the previous state is rendered. I need to know how to render the current state on button click.

const Signup = () => {
    const [formData, setFormData] = useState({firstname: '', lastname: '', email: '', username: '', password: ''})
    const [resData, setResData] = useState("");
    const navigate = useNavigate();
    useEffect(()=>{
        if (resData==="registered"){
            //console.log(res.data);
            navigate("/login");
        } 

    }, [resData])
    const onSubmit = (e) => {
        e.preventDefault()
        axios.post('http://localhost:8800/register', formData)
            .then((res)=>{                    
                setResData(res.data);
                console.log(resData);
            })
    }