Why is my CSS transition not working when I map items?

I'm trying to make a component showing items on click. These items are from an array, so I use a map to display them. If I use index as key or no key the transition works, but if I use a package generating keys (like this one https://www.npmjs.com/package/uuid) there's no transition. Since it's bad practice to use the index as key, how could I fix this?

This is my code:

const Button = styled.button`
    position: absolute;
    top: 0;
    left: ${({ isOpen }) => (isOpen ? "200px" : 0)};
    transition: left 0.5s ease;
`

const Component = () => {
    const [isOpen, setIsOpen] = useState(false)

    const items = [
        {
            name: "Item",
        },
        {
            name: "Item",
        },
        {
            name: "Item",
        },
    ]

    return (
        <div>
            <button onClick={() => setIsOpen(!isOpen)}>Open</button>

            <div>
                {items.map(item => (
                    <Button isOpen={isOpen} key={uuid()}>
                        {item.name}
                    </Button>
                ))}
            </div>
        </div>
    )
}

Thanks for your answers!