How to make a pop up toast?

Question

Bootstrap

Hello
I want a message to pop up from the server in case of an error

Here is Tost

const [show, setShow] = useState(false);

<Toast onClose={() => setShow(false)} show={show} delay={3000} autohide>
      <Toast.Body>text</Toast.Body>
</Toast>

And here's how I want to use it

import { useCallback, useState } from "react";
import { Toast } from "react-bootstrap";

export const useMessage = () => {
   const [show, setShow] = useState(false);

  return useCallback((text) => {
    if (text) {

      <Toast onClose={() => setShow(false)} show={show} delay={3000} autohide>
           <Toast.Body>text</Toast.Body>
      </Toast>
    }
  });
}

What the console outputs
Line 8:9: Expected an assignment or function call and saw instead an expression no-unused-expressions
Line 8:9: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 9:7: 'React' must be in scope when using JSX react/react-in-jsx-scope

Search for the keywords to learn more about each error.

Here I call

const message = useMessage();
  useEffect(() => {
    message(error);
    clearError();
  }, [error, message, clearError]);

Answer 1

import React from 'react';