当我在搜索栏上搜索时，出现无法读取属性值等错误，为什么会出现此错误，之前我做了很多表单，但没有出现此错误，请告诉我为什么会出现此错误，我应该使用 Material UI 而不是 Bootstrap 替换吗

Music.js

这是我出现错误的 music.js 文件，我使用 react-hooks 来管理状态

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import RadioIcon from '@material-ui/icons/Radio';
import firebase from '../Firebase';
import SearchBar from "material-ui-search-bar";
import { useHistory } from 'react-router-dom';
import { Container, Input, TextField } from '@material-ui/core';



const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
    menuButton: {
        marginRight: theme.spacing(2),
    },
    title: {
        flexGrow: 1,
    },
    search:{
        marginTop:30,
    },
}));

const Music = () => {

    const [search, setSearch] = useState("");

    const history = useHistory();

    const Logout = () => {
        firebase.auth().signOut().then(() => {
            alert("Logout Successfull...");
            history.push('/');
        }).catch((error) => {
            console.log(error);
        });
    }

    const classes = useStyles();

    return (
        <div className={classes.root}>
                <AppBar position="static">
                    <Toolbar>
                        <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
                            <RadioIcon style={{ fontSize: "30px" }} />&nbsp; React Music
                    </IconButton>
                        <Typography variant="h6" className={classes.title}>
                        </Typography>
                        <Button color="inherit" onClick={Logout}> <ExitToAppIcon /> Logout </Button>
                    </Toolbar>
                </AppBar>
                <Container>
                    <SearchBar className={classes.search}
                    value={search}
                    onChange={(e)=>setSearch(e.target.value)}/>
                </Container>
                
        </div>
    );
}

export default Music;