Render notification component on screen

Question

Hello, I’m trying to render a notification component on the screen when the Ubmit button is clicked, however I’m returning the component directly in Return, it’s not working because it’s the wrong way, but I don’t know how it’s the right way to do it.

Basically I have a Submit function, in it I pass another function called HandleError, this function returns a component Notificationthat I created, it is working perfect because I tested it elsewhere, but when putting it in Return nothing happens when the Submit button is clicked, I would like to know why. Thank you from now on.

Note: I’m not returning anything in htlm, just the function HandleSubmitby clicking the button.

const [input, setInput] = useState("");

async function handleSubmit(e) {
e.preventDefault();
const data = input;
try {
  const response = await service.create(data);
  handleError(response.status);
  return response;
} catch (err) {
  handleError(err.response.status);
  }
}

function handleError(statusCode) {
  if (statusCode === 201)
    return (
      <Notification
        title="Teste"
        description="teste do teste"
        type="success"
       />
     );
else
  return (
    <Notification title="Teste" description="teste do teste" type="error" />
  );
}

Code for my notification component

function Notification({ title, description, type }) {
 return (
   <div>
     {notification[type]({
       message: title,
       description: description,
     })}
   </div>
 );

}

Basically it is this notification that will appear on the screen if the form submission works and everything ok