Почему добавляя кнопку все рушится?

Добавляя часть кода кнопки и последующего ветвления, который меняет данные выдает ошибку:

Uncaught Error: Objects are not valid as a React child (found: object with keys {id, name, status, species, gender, hair, alias, origin, abilities, img_url}). If you meant to render a collection of children, use an array instead

Вот код:

const activeCharacters = characters.filter((char) => !char.deleted); 
const cartCharacters = characters.filter((char) => cart.includes(char.id));
let filteredCharacters = activeCharacters;

return (
        <div className='container mx-auto pb-24 p-5 md:p-0'>
            <h1 className='text-lg font-bold my-8'>Characters</h1>
            <button onClick={() => {changeState()}}>LIkE</button>
            {(!button) ? (
                filteredCharacters = cartCharacters
            ) : (
                filteredCharacters = activeCharacters
            )}
            <div className='grid grid-cols-2 my-8 gap-24 md:grid-cols-5'>
                {filteredCharacters.map((char) => <Product key={char.id} product={char} />)}
            </div>
        </div>
)

но если удалить кнопку и просто в ручную менять, чему равен filteredCharacters, все хорошо