Arrows elements are polluted

### Problem
When using arrows (`arrows: true`), elements used in `nextArrow` and `prevArrow` are polluted. Their `className` is changed entirely. Used Chrome DevTools to check the class list.

### Expected behaviour
Either:
a) embed the passed element in some `div` or
b) make the library append required classes (`slick-arrow`, `slick-next`) instead overwriting whole class list (the same would be with other fields possibly(?)).
c) add `nextArrowClassName`/`rightArrowClassName` (but its stupid tbh)

### Example code
https://codesandbox.io/s/react-slick-playground-forked-lew3o?file=/index.js
The example code includes part of https://react-slick.neostack.com/docs/example/custom-arrows .

### Workaround
Embed the passed element in dummy `div`. By the way, React `Fragment` won't do ('<>`).

_Tags: `[Not critical]`, `[Quality of Life]`_