我正在学习react，并尝试在暗模式更改为亮模式和亮模式更改为暗模式时显示alert msg。我尝试过此代码，但无法解决此错误。我提供了暗模式和亮模式的切换按钮，该按钮工作正常，但当我在useState（null）中使用null时，我在alert.js页面的第7行收到错误

Alert.js:7 
        
       Uncaught TypeError: Cannot read properties of null (reading 'type')
    at Alert (Alert.js:7:1)

这是我的App.Js页面
'

import './App.css';
import React, { useState } from 'react';
import About from './components/About';
import Navbar from './components/Navbar';
import TextForm from './components/TextForm';
import Alert from './components/Alert';

function App() {
  const [mode, setMode] = useState('light'); //to set initial mode to light
  const [alert, setAlert] = useState(null);

  const showAlert = (message, type) => {
    setAlert({
      message: message,
      type: type,
    })
  }

  const toggleMode = () => {
    if (mode === 'dark') {
      document.body.style.backgroundColor = '#fff';
      showAlert("Dark mode has been enabled", "success");
      setMode('light');
    } else {
      document.body.style.backgroundColor = '#06213d';
      showAlert("Light mode has been enabled", "success");
      setMode('dark')
    }

  }
  return (
    <>
      <Navbar title="Text Utils" mode={mode} toggleMode={toggleMode} />
      <Alert alert={alert} />
      <div className='container my-3'>
        <TextForm heading='Enter the text to analyze below' mode={mode} />
        <About mode={mode}></About>
      </div>
    </>
  );
}

export default App;

'这是我的Alert.js页面
'

import React from 'react'

function Alert(props) {
    return (
        <div>
             <div className="alert alert-warning alert-dismissible fade show" role="alert">
             props.alert && <strong>{props.alert.type}</strong>: {props.alert.msg}
                <button type="button" className="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    )
}

export default Alert

'
我试过谷歌的解决方案，但不起作用。有没有办法解决这个问题。