stop re rendering after promise is fulfilled

Question

This is a simple app in react that fetch the data from the nasa api.Div tag is re rendering continuously (like infinite loop) is there be any method to stop the api fetching after a promise is fulfilled.Also my arr is changing its value. . Thanks in advance.

 function App() {
      const [arr, setarr] = useState([]);
      var promise = new Promise(async(resolve, reject) => {
        axios
          .get(
            "https://api.nasa.gov/planetary/apod?api_key=R4s5xcOxoYklREakJOSoeNMCOK4tpM8iqg6slJ15&count=2&hd=true"
          )
          .then((res) => {
            //res.data[i].hdurl
            resolve(res.data);
          });
        return promise;
      });
    
      let show = () => {
        promise.then((result) => {
          setarr(result);
        });
      };
      //show();
    
      return (
        <>
           <div className="container">
            {arr.map((val, i) => {
              return (
                <div
                  id="carouselExampleIndicators"
                  className="carousel slide"
                  data-bs-ride="carousel"
                >
                  <div className="carousel-indicators"></div>
                  <div className="carousel-inner">
                    <div className="carousel-item active">
                      <img
                        src={val.hdurl}
                        key={i}
                        className="d-block w-100"
                        alt="img"
                      ></img>
                      <br />
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </>
      );
    }
    
    export default App;