Stop React Typist from moving text line up when typing a new line/ line break?

[DevelopwithTom]

I'm using typist to generate a typed effect title for a website.

However, I have multiple lines of text and each time a line break occurs, the text that has already been typed it pushed upward (see gif).

Can this be stopped and can the new line of text appear below the previously typed text. I have seen it done before but cannot replicate it (like this).

My JS:

export default class TypistTitle extends Component {
  render() {
    return (
      <Typist>
        <div className="main_title">
          Lorem ipsum dolor gentrify fam bespoke
          <br />
          Pork belly church-key snackwave tbh, subway tile tumeric
          <Typist.Backspace count={20} delay={200} />
          <br />
          Brooklyn woke cliche farm-to-table. YOLO salvia 8-bit
        </div>
      </Typist>
    )
  }
}

My CSS:

.main_title {
  font-family: "Open Sans", sans-serif;
  font-size: 3em;
  font-weight: 200;
  margin-left: 3vw;
}

[DevelopwithTom]

This problem was caused by the CSS for my background image - 'align-items: center;'

Deleting it solved my problems!

[jorcass]

Using someones example in another issue, I also sorted it out by feeding the length of the string to the count:

const TypeWriter = () => {
  const [count, setCount] = useState(1);

  useEffect(() => {
    setCount(1);
  }, [count]);

  return (
    <div style={{ color: 'white' }}>
      {count ? (
        <Typist
          avgTypingDelay={40}
          startDelay={800}
          cursor={{ blink: true }}
          onTypingDone={() => setCount(0)}
        >
          {messages.map((mssg, index) => (
            <span key={index}>
              {mssg}
              <Typist.Backspace count={mssg.length} delay={1500} />
            </span>
          ))}
          <Typist.Backspace count={20} delay={1500} />
        </Typist>
      ) : (
        ''
      )}
    </div>
  );
};