useState sends correct info to a server only after the second click

Question

I'm trying to send data to my server after clicking on an image (handleClick function). I have 2 images and I need to know which image got clicked, but I get the correct result sent only after the second click.

I read that useEffect helps this issue, BUT I use useEffect in the same component for another also very crucial function. I tried to squeeze this function inside useEffect as well, but sadly doesn't work (I get "handleClick is not defined" error below on images, where they listen to click event and need to execute handleClick).

Any help will be greately appreciated!

export default function PollVoter() {
    const [poll, setPoll] = useState({});
    const [answer, setAnswer] = useState();

     useEffect(() => {
            function viewingPoll() {
//here goes irrelevant other function info
            } viewingPoll();
//this is relevant:
            const handleClick = (e) => {
                e.preventDefault();
                console.log("e.target", e.target);
                if (e.target.name === "A") {
                    (async () => {
                        setAnswer(1);
                        console.log("I'm clicking on left image");
                        await fetch("/api/vote", {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json",
                            },
                            body: JSON.stringify({
                                poll_id: poll.id,
                                answer: answer,
                            }),
                        });
                        // .then(() => {
                        //     // location.redirect(`/polls/${result.pollId}`);
                        //     location.reload();
                        //     e.target.value === "";
                        // });
                    })();
                } else if (e.target.name === "B") {
                    (async () => {
                        setAnswer(2);
                        console.log("I'm clicking on right image");
                        await fetch("/api/vote", {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json",
                            },
                            body: JSON.stringify({
                                poll_id: poll.id,
                                answer: answer,
                            }),
                        });
                    })();
                } else {
                    (async () => {
                        setAnswer(0);
                        console.log("I'm not clicking ");
                        await fetch("/api/vote", {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json",
                            },
                            body: JSON.stringify({
                                poll_id: poll.id,
                                answer: answer,
                            }),
                        });
                    })();
                }
                // console.log("this is what I answered", answer);
            };
        }, [answer]);

async-await didn't stop my issue either, I did it outside of useEffect.

const handleClick = (e) => {
        e.preventDefault();
        if (e.target.name === "A") {
            (async () => {
                setAnswer(1);
                console.log("I'm clicking on left image");
                await fetch("/api/vote", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({
                        poll_id: poll.id,
                        answer: answer,
                    }),
                });
            })();
        } else if (e.target.name === "B") {
            (async () => {
                setAnswer(2);
                console.log("I'm clicking on right image");
                await fetch("/api/vote", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({
                        poll_id: poll.id,
                        answer: answer,
                    }),
                });
            })(); ```

UPDATE: Almost fixed an issue, now I'm getting the results twice though. As Drew suggested in the comments, I updated state in my handleClick and fetch in useEffect.

const handleClick = (e) => {
        e.preventDefault();
        console.log("e.target", e.target);
        if (e.target.name === "A") {
            (async () => {
                setAnswer(1);

                console.log("I'm clicking on left image");
            })();

but I added the second useEffect (hope it's allowed, but might be the reason I'm getting my results twice)

 useEffect(() => {
 //this other function stuff
        function viewingPoll() {
            fetch(`/api/polls/${pollIview}`)
//so on
        viewingPoll();
    }, []);

    useEffect(
        (e) => {
            fetch("/api/vote", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    poll_id: poll.id,
                    answer: answer,
                }).then(() => {
                    // location.redirect(`/polls/${result.pollId}`);
                    location.reload();
                    e.target.value === "";
                }),
            })();
        },
        [answer]
    );