比上一次渲染时渲染更多的钩子，与 makeStyles 连接

Question

当我将数组从 p1 更改为 时，渲染的钩子比以前的钩子多或更少 与 ma​​keStyles 相关的问题p2 按钮点击。显示另一种颜色和头像的名称。

export default function PlayerAvatar() {

const p1 = [{'name': '1', 'color': '#fff'},
    {'name': '2', 'color': '#000'}]
const p2 = [{'name': '1', 'color': '#fff'},
    {'name': '2', 'color': '#000'},
    {'name': '3', 'color': '#520707'},
    {'name': '4', 'color': '#c4ff1b'}]
const [peoples, setPeoples] = useState(p1)

const useStyles = makeStyles((theme) => ({
    root: props => ({
        color: theme.palette.getContrastText(props.color),
        backgroundColor: props.color,
    }),
}));


let results = peoples.map((player, index) => {
    const classes = useStyles({color: player.color}); //if cut this line all works fine, but without colors
    return (<Avatar key={index} className={classes.root}>{slice_name(player.name)}
    </Avatar>)
})


return (
    <div>
        <Button onClick={() => setPeoples(p2)}>Change</Button>  // changing array from p1 to p2
        <AvatarGroup max={8}>
            {results}
        </AvatarGroup>
    </div>
)

}