I am looking to make my alert() more user friendly. I have 3 ponents which fit together before an alert is trigger.

I have a form (dropdown and input) which on submit fires the following function:

// src/ponents/input.js
<Btn onClick={() => getData(this.state.dropdown, this.state.value)}>Generate</Btn>

getData() is the following function which is in a separate file ../utils/debugger

// src/utils/debugger
async function getData(filter, captureName) {
  if (captureName === '') {
    alert(<Alert color='red' type='warning' message='this is an error' />);
  } else {
    axios({
      method: 'GET',
      url: `http://xxx/debugger/${filter}/${captureName}/logs`,
    })
      .then((res) => {
        if (res.data.length === 0) {
          alert(<Alert color='red' type='warning' message='this is an error' />);
        } else {
          alert(<Alert color='green' type='success' message='this is an error' />);
          console.log(res.data);
          data = res.data;
        }

        return res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  }
}

But I would like to use the alerts above to present my <Alert /> ponents in the following file:

// src/App.js
ReactDOM.render(
  <React.StrictMode>
    <script src='http://localhost:8097'></script>
    <div className='flex flex-col min-h-screen'>
      <header>
        <nav className='bg-gray-800'>
          <div className='mx-auto px-8'>
            <div className='flex items-center justify-between h-20'>
              <div>
                <span className='text-white font-bold'>Easy Debugger UI</span>
              </div>

              <div className=''>
                <Input /> // ../src/ponents/input.js
              </div>
            </div>
          </div>
        </nav>
      </header>

      <div className='container mx-auto'>
        <div className='my-2'>
          <Alert color='red' type='warning' message='waaaah' /> // display my alert here.
        </div>
        <main>
          <App />
        </main>
      </div>
      <footer className='mt-10'></footer>
    </div>
  </React.StrictMode>,
  document.getElementById('root')
);

I have tried to use the alert() but this just gives me the standard popup with [object object]

any ideas how i can get all these 3 files to talk to each to fire off the alerts when the conditionals are met in getData()

This is my Alert ponent...i want to keep this the way it is

import React from 'react';

export const Alert = ({ color, type, message }) => {
  const [showAlert, setShowAlert] = React.useState(true);

  function AlertType(props) {
    const alertType = props.alertType;

    if (alertType === 'success') {
      return (
        <span role='img' className='text-3xl'>