useState method not setting the states fast – Javascript

I am new to React and I have this simple code and I got two questions:

import { useState, useEffect } from 'react';

const UpdateArticle = () => {
  let filteredArticle;
  const id = 2;
  const [theArticle, setTheArticle] = useState({});

  const testArticles = [
    {
      id: 1,
      title: 'Maxaan qabtaa?',
      body: 'Wax daran bay ku hadlayaan kuwa halkaan ila jooga.',
      writer: 'Jama',
    },
    {
      id: 2,
      title: 'Why django?',
      body: 'Simple: it is very simple.',
      writer: 'Dennis',
    },
  ];

  const updateArticle = () => {
    filteredArticle = testArticles.find((article) => article.id === id);
    setTheArticle(filteredArticle);
  };
  // console.log("Test");
  useEffect(() => {
    updateArticle();
    console.log('Test');
    console.log(filteredArticle);
    console.log(theArticle);
  }, [id]);

  return (
    <div className="article update">
      <h1>{theArticle.title}</h1>
    </div>
  );
};

1. Why is the setTheArticle method is not setting the theArticle instantly? The console.log in the useEffect gives an empty object even though the filteredArticle above it has a correct value.

2. the console does everything twice. This is the case even if I put one outside useEffect and outside the updateArticle function. for example, for the above case it gives something like this:

Test
{id: 2, title: "Why django?", body: "Simple: it is very simple.", writer: "Dennis"}
{} (empty???)
Test
{id: 2, title: "Why django?", body: "Simple: it is very simple.", writer: "Dennis"}
{} (empty???)

The question is why?

I even suspected it is my configuration and went to stackblitz. The same thing. and also I am NOT calling the component twice.