Как сделать всплывающий тост?

Question

[GreatX]

Здравствуйте
Хочу чтобы в случае ошибки с сервера всплывал месадж

Вот Tost

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

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

А вот как я хочу его использовать

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>
    }
  });
}

То что выдает консоль
Line 8:9: Expected an assignment or function call and instead saw 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.

Вот здесь вызываю

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

Answer 1

[real2210]

import React from 'react';

Comments

[GreatX]

пишет что
Line 9:7: Expected an assignment or function call and instead saw an expression no-unused-expressions