React.js에서 내 배열을 통해 필터링 할 수 없습니다.

누구든지 React.js의 필터로 나를 도울 수 있는지 궁금합니다. 내 React 앱은 Pokemon API에서 내 데이터를 가져 오는 Node.js 앱에 연결되어 있습니다. 기본적으로 프런트 엔드 경로 / pokemon : id에 하나의 포켓몬 카드를 표시하고 싶습니다. 이렇게하려면 배열을 통해 필터링 한 다음 매핑합니다. 어떤 이유로 이것은 작동하지 않으며 누군가 내 코드를 확인하고 내가 간단한 실수를하고 있는지 확인할 수 있는지 궁금합니다. 나는 필터를 제거하면 모든 것이 작동하기 때문에 내 포켓몬 카드를 필터링하는 방식에 문제가 있다고 생각합니다. 코딩 한 지 3 개월 밖에되지 않았으니 엉성한 코드를 용서 해주세요!

import React, {useState} from "react";
import { useParams } from "react-router-dom";
import { makeStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import CardActions from '@material-ui/core/CardActions';
import Collapse from '@material-ui/core/Collapse';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';


const useStyles = makeStyles((theme) => ({
    root: {
      maxWidth: 345,
    },
    media: {
      height: 0,
      paddingTop: '56.25%', // 16:9
    },
    expand: {
      transform: 'rotate(0deg)',
      marginLeft: 'auto',
      transition: theme.transitions.create('transform', {
        duration: theme.transitions.duration.shortest,
      }),
    },
    expandOpen: {
      transform: 'rotate(180deg)',
    },
  }));


const PokeDetail = ({ pokemon }) => {
     const { id } = useParams();

    const classes = useStyles();
    const [expanded, setExpanded] = useState(false);
  
    const handleExpandClick = () => {
      setExpanded(!expanded);
    };
   

return (
     <div>
          {pokemon.length >= 1 && 
             pokemon
                 .filter((poke) => {
                     return poke.id === id
          })
        .map((poke) => (
            <div>
              <Card className={classes.root}>
                   <CardHeader
                    title={poke.name.english}
                    subheader={poke.type}
                />
                <CardMedia
                    className={classes.media}
                    image="/Images/"
                    title={poke.name.english}
                />
                <CardContent>
                    <Typography variant="body2" color="textSecondary" component="p">
                    Japanese: {poke.name.japanese} Chinese: {poke.name.chinese} French: {poke.name.french}
                    </Typography>
                    
                </CardContent>
                <CardActions disableSpacing>
                    <IconButton
                    className={clsx(classes.expand, {
                        [classes.expandOpen]: expanded,
                    })}
                    onClick={handleExpandClick}
                    aria-expanded={expanded}
                    aria-label="show more"
                    >
                    <ExpandMoreIcon />
                    </IconButton>
                </CardActions> 
                <Collapse in={expanded} timeout="auto" unmountOnExit>
                    <CardContent>
                    <Typography paragraph>Description</Typography>
                    <Typography paragraph>

                                Attack: {poke.base.Attack} 
                                Defense: {poke.base.Defense} 
                                Speed: {poke.base.Speed}
                              
                    </Typography>
                    
                    </CardContent>
                </Collapse>
                </Card>
           </div>
          ))}
       
       </div>
     
        
     );
}; 

export default PokeDetail;