React Effector State Management Based on Dropdown

I'm using React Hooks and Effector to try and render data onto a card. The data will be driven off a React-Select dropdown (which represents different countries), and the idea is that the user will be able to add selections based on those countries, kind of like a TODO app.

However, I'm finding that whenever I go back to a previous dropdown selection, the data doesn't save. I'm using effector, hooks, react-select and react-jss for styling. The team gets passed as a prop from a React-Select component.

const PlayerComponent = ({ containerStyles, team }) => {

    const [items, setItems] = useState([]);

    const teamsStore = useStore(testTeams);
    const playersStore = useStore(testPlayers);

    useEffect(() => {

        const playersByTeam = playersStore.filter(
            (player) =>
                player.teamId ===
                teamsStore.find(function (t) {
                    return t.label === team;
                }).teamId
        );
    
        setItems(
            playersByTeam.map(function (player) {
                let players = { name: player.name };
                return players;
            })
        );
    }, [playersStore,team,teamsStore]);

    function onAddButtonClick() {
        setItems((prev) => {
            const newItems = [...prev];

            newItems.push({
                name: `Player ${newItems.length + 1}`
            });

            playersStore.push({
                name: `Player ${newItems.length + 1}`
            });

            return newItems;
        });
    }

    function renderAddButton() {
        return (
            <Row
                horizontal='center'
                vertical='center'
                onClick={onAddButtonClick}
            >
                Add Player
            </Row>
        );
    }

    return (
        <CardComponent
            containerStyles={containerStyles}
            title={team}
            items={[
                <Row horizontal='space-between' vertical='center'>
                    <span>
                        Create new player
                    </span>
                    {renderAddButton()}
                </Row>,
                ...items.map((item, index) => (
                    <Player index={index} item={item} />
                ))
            ]}
        />
    );
};

And this is my Player component, which represents a row each:

function Player({item = {} }) {
    return (
        <Row horizontal='space-between' vertical='center'>
            <Row>
                <span>{item.name}</span>
            </Row>
        </Row>
    );
}

Here's an example image. Basically, after selecting a country (say England) from a dropdown, I can add a player and it will render on the card- however, when I select a different country and go back the previous country, the added players disappear. Any ideas how to solve this? I'm cracking my head on the onAddButtonClick() function right now...

from React Effector State Management Based on Dropdown