title: React setTimeout after 3 seconds on Error
body: <p>Im trying to make the error remove itself from an State array after 3 seconds, and it kinda of works, but for some reason it jumps back and acts weird/removes multiple on 1 timeout finished. (seen in the Error Functional Component).</p>
  
  <p>Im using React context for my State Management, and would appreciate any help i could get.</p>
  
  <p>i would appreciate any help</p>
  
  <p>You can view the bug live here: <a href="https://codesandbox.io/s/flamboyant-jackson-soutv?file=/src/components/Errors.jsx:558-567" rel="nofollow noreferrer">https://codesandbox.io/s/flamboyant-jackson-soutv?file=/src/components/Errors.jsx:558-567</a></p>
  
  <p><strong>Errors.jsx</strong></p>
  
  <pre><code>import { SiteContext } from "../context/SiteContext";
  
  const Error = props =&gt; {
    const [siteSettings, setSiteSettings] = useContext(SiteContext);
    let errors = siteSettings.errors;
    console.log("Errors", errors);
    let filteredAry = errors.filter(function(obj) {
      return obj.id !== props.id;
    });
    //removed last id , and filteredArray is where we store the new array
    console.log("Filtered array", filteredAry);
    //after 3 seconds we should update the old array with the new array
    useEffect(() =&gt; {
      setTimeout(() =&gt; {
        setSiteSettings(siteSettings =&gt; ({
          ...siteSettings,
          errors: filteredAry
        }));
      }, 3000);
    }, []);
  
    return &lt;div className="error"&gt;{props.error}&lt;/div&gt;;
  };
  
  const Errors = () =&gt; {
    const [site, setSiteSettings] = useContext(SiteContext);
    const addError = () =&gt; {
      //find the latest id
      let max = 0;
      if (site.errors.length &gt; 0) {
        max = Math.max.apply(null, site.errors.map(item =&gt; item.id)) + 1;
      } else {
        max = 1;
      }
      console.log("Highest id: " + max);
      //add new error to the State,
      setSiteSettings(site =&gt; ({
        ...site,
        errors: [...site.errors, { message: "Some error", id: max }]
      }));
    };
    return (
      &lt;div id="errors"&gt;
        Error page
        {site.errors.map((error, i) =&gt; {
          return &lt;Error id={i} error={error.message} /&gt;;
        })}
        &lt;button onClick={addError}&gt;Add error&lt;/button&gt;
      &lt;/div&gt;
    );
  };
  
  export default Errors;
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import "./styles.css";
  import { SiteProvider } from "./context/SiteContext";
  import Errors from "./components/Errors";
  
  export default function App() {
    return (
      &lt;SiteProvider&gt;
        &lt;div className="App"&gt;
          Errors : &lt;Errors /&gt;
        &lt;/div&gt;
      &lt;/SiteProvider&gt;
    );
  }
  </code></pre>
  
  <p><strong>SiteContext.jsx</strong></p>
  
  <pre><code>
  export const SiteContext = createContext();
  
  export const SiteProvider = props =&gt; {
    const [siteSetting, setSiteSetting] = useState({
      errors: []
    });
  
    return (
      &lt;SiteContext.Provider value={[siteSetting, setSiteSetting]}&gt;
        {props.children}
      &lt;/SiteContext.Provider&gt;
    );
  };
  </code></pre>
  
  <p>Best Regards, Daniel.</p>