Mailchimp - success message to clear the success message after the user has submitted the form in React

Question

Im trying to use the Mailchimp npm package and it works as intended. However, Im trying to clear the error or success message once a user clicked 'Subscribe' as currently it doesn't go away until the page is refreshed. I dont want to refresh the page but rather display a success/error message for 5 sec and then it clears out

I tried setTimeout but it didn't really work for me. Im still learning React, any advice highly apprecaited!

Here is my code with statuses below:

import React, { useState, useEffect } from 'react';
import MailchimpSubscribe from "react-mailchimp-subscribe"
import './Newsletter.css';
import NewsletterForm from './NewsletterForm';
import './Newsletter.css';


const Newsletter = (props) => {

  const postUrl = `https://warikerestaurant.us20.list-manage.com/subscribe/post?u=${process.env.REACT_APP_MAILCHIMP_U}&id=${process.env.REACT_APP_MAILCHIMP_ID}`;

  return (
    <div className="mc__form-container app__newsletter">
      <h3 className="mc__title app__newsletter-heading">Join our email list for future updates</h3>
      <MailchimpSubscribe
        url={postUrl}
        render={({ subscribe, status, message }) => (
          <>
            {status === "sending" && <div style={{ color: "blue" }}>please wait...</div>}
            {status === "error" && <div style={{ color: "red" }} dangerouslySetInnerHTML={{ __html: message }} />}
            {status === "success" && <div style={{ color: "green" }}>You are successfully subscribed !</div>}
          <NewsletterForm
            status={status}
            message={message}
            onValidated={formData => subscribe(formData)}
          />

          </>
        )}
      />
    </div>
  );
};

export default Newsletter;

I tried setTimeout with useEffect but it didn't really work, nothing was showing up. I tried to include setTimeout after

{status === "success" &&

However I dont think it works in React