The text is going off the screen

[annie-bhaiya]

I used the code of the readme and then edited it. My output has the text going off the screen.

import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Katex from 'react-native-katex';


const inlineStyle = `
html, body {
  display: flex;
  background-color: #fafafa;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;
}
.katex {
  font-size: 4em;
  margin: 0;
  display: flex;
}
`;

export default function App() {
    var text = `When water is heated from \( 0^{°} \mathrm{C} \), its volume will
A. decrease till \( 4^{°} \mathrm{C} \) then increase
B. decrease till \( 4^{°} \mathrm{C} \)
c. remain the same
D. first increase then decrease`
    text = text.replace(/ /g, '\\text{ }');
    text = text.replace(/\n/g, `\\text{
        
    }`);

    const inlineText = 'inline text';
    const [loaded, setLoaded] = useState(false);
    

    return ( <
        Katex expression = { text }
        inlineStyle = { inlineStyle }
        displayMode = { false }
        throwOnError = { false }
        errorColor = "#f00"
        macros = {
            {}
        }
        colorIsTextColor = { false }
        onLoad = {
            () => setLoaded(true)
        }
        onError = {
            () => console.error('Error')
        }
   

     />
    );
}