Never access the real DOM. Use states and render it the React way.

I would generally use a state to change something - refer Using the State Hook. And then render it out. Create this:

const [Text, setText] = useState("this text should change");

Render it:

<h1>{Text}</h1>

Use the event handler and use a type="button" so that it doesn't refresh the page:

  <Button
    className=" btn btn1"
    color="light"
    type="button"
    onClick={() => {
      setText("Praveen is awesome! You clicked on YES button!");
    }}
  >
    YES
  </Button>
  {/*// this button should change the text*/}
  <Button
    className=" btn btn2"
    color="light"
    type="button"
    onClick={() => {
      setText("Praveen is awesome! You clicked on NO button!");
    }}
  >
    NO
  </Button>

Now see the magic: https://557w4.csb.app/

Code:

import Button from "react-bootstrap/Button";
import "./App.css";
import { Container } from "react-bootstrap";
import { Row } from "react-bootstrap";
import { useState } from "react";

function App() {
  const [Text, setText] = useState("this text should change");
  return (
    <Container>
      <Row className="Row">
        <div className="frame">
          <h1>{Text}</h1>
          <Button
            className=" btn btn1"
            color="light"
            type="button"
            onClick={() => {
              setText("Praveen is awesome! You clicked on YES button!");
            }}
          >
            YES
          </Button>
          {/*// this button should change the text*/}
          <Button
            className=" btn btn2"
            color="light"
            type="button"
            onClick={() => {
              setText("Praveen is awesome! You clicked on NO button!");
            }}
          >
            NO
          </Button>
        </div>
      </Row>
    </Container>
  );
}

export default App;

Preview

Full CodeSandBox: https://codesandbox.io/s/broken-snow-557w4?file=/src/App.js

In this case, you have to use the hook state (Documentation).

So, first of all you have to import the useState hook, then create it and finally use it.

So, your code will be something like that:

import Button from 'react-bootstrap/Button';
import './App.css';
import { Container } from 'react-bootstrap';
import { Row } from 'react-bootstrap';
import { useState } from 'react';

function App() {

  const [text, setText] = useState("this text should change");

  return (
    <Container>
    
    <Row className="Row">
      <div className="frame">
 
      <h1>{text}</h1>
        <Button className=" btn btn1" color="light" onClick={e => setText("new text")}>YES</Button> // this button should change the text
        <Button className=" btn btn2" color="light">NO</Button>
     </div>
    </Row>

   </Container>
  );
}

export default App;