I'm using react-responsive-carousel for a vertical text-only carousel, but for some reason the slider is not positioning correctly and I can't figure out why.

When I break the lines it looks like this and I can't fix it:

This is the code for the above behavior, on top of a default create-react-app.

import './App.css';
import { Carousel } from "react-responsive-carousel";
import "react-responsive-carousel/lib/styles/carousel.min.css";

function App() {

  const phrases = [
    <p keu="1" className="text">FIRST PHRASE <br></br> SOME TEXT</p>,
    <p key="2" className="text">SECOND PHRASE <br></br> SOME MORE TEXT</p>
  ];

  return (
    <div className="App">
      <header className="App-header">
        <Carousel
          axis='axis'
          autoPlay='autoPlay'
          dynamicHeight={false}
          infiniteLoop={true}
          labels={false}
          showArrows={false}
          showStatus={false}
          showIndicators={false}
          showThumbs={false}
          width={400}
        >
          {phrases.map((item, id) => (
            <div key={id} style={{ backgroundColor: "brown" }}>
              {item}
            </div>
          ))}
        </Carousel>
      </header>
    </div>
  );
}

export default App;

Only extra dependency I'm using is yard add react-responsive-carousel

Update

Not a solution but we switched to react-slick which seems to have better support and it worked like a charm.