我试着用pokeapi开发一个pokedex。现在它运行得很好，口袋妖怪被正确提取并显示在一个容器中。现在我想实现一个功能来搜索和过滤口袋妖怪。因此我用MaterialUI在应用程序顶部放置了一个搜索栏。
从App.js中获取的口袋妖怪被提供给我的组件PokemonList，后者Map数据。我现在的想法是在将pokemonData提供给PokemonList之前过滤掉它，以便只Map我正在寻找的口袋妖怪。但在这里我卡住了。我不知道如何将搜索功能与App.js中的pokemonData挂钩连接起来。你能帮助我吗？
这是我的searchBar组件：

const SearchAppBar = () => {
const [search, setSearch] = useState("");
    console.log(search)
    return (
      <Box sx={{ flexGrow: 1 }}>
        <AppBar position="static" sx={{ bgcolor: "black"}}>
          <Toolbar>
            <IconButton
              size="large"
              edge="start"
              color="inherit"
              aria-label="open drawer"
              sx={{ mr: 2 }}
            >
              <MenuIcon />
            </IconButton>
            <Typography
              variant="h6"
              noWrap
              component="div"
              sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
            >
              
              <img src={logo} alt="logo" width="150" height="auto" />
            </Typography>
            <Search>
              <SearchIconWrapper>
                <SearchIcon />
              </SearchIconWrapper>
              <StyledInputBase 
                onChange={(e) => setSearch(e.target.value)}
                id = 'searchbox' 
                placeholder="Search for Pokémon..."
                inputProps={{'aria-label': 'search'}}
              />
            </Search>
          </Toolbar>
        </AppBar>
      </Box>
    );
  }

export default SearchAppBar;