React js Calculator final result shows inside console.log but not in the browser

Blockquote I CAN NOT PUSH MY RESULT TO THE PAGE, BUT new1Num and new2Num as well as newOper is Blockquote reflected just fine. result only shows up inside console.log(result); I already tried taking var result outside of main function and tried const and also tried "let [result, setNewAnsw] = useState(0); " just like i did for new1Num but still no luck.

    import React, { useState } from 'react';
   // If the component accepts a parameter, this is referred to as a "prop."
   // Props allows to pass values INTO my components from a parent document / component.
   function Calculator (props)
   { // Every component should return JSX.
     const [new1Num, setNew1Num] = useState(0);
     const [new2Num, setNew2Num] = useState(0);
     const [newOper, setNewOper] = useState('add');
     // let [result, setNewAnsw] = useState(0);  
     var result;
     const onFormSubmit = event => 
     {
       event.preventDefault();
   
       console.log(new1Num);
       const a = parseFloat(new1Num);
   
       console.log(newOper);
   
       console.log(new2Num);
       const b = parseFloat(new2Num);
   
       let result;
       if (newOper == 'add'){
         result = a + b;
         console.log(result);
       }
       else if (newOper == 'subtract'){
         result = a - b;
       }
       else if (newOper == 'divide' && b !=0){
         result = a / b;
       }
       else if (newOper == 'multiply'){
         result = a * b;
       }
       return newResult = result; //IN THIS SECTION I CAN'T TAKE MY RESULT TO RENDER INSIDE DOM
     }
     let heading = props.heading;
     let input1 = props.input1;
     let input2 = props.input2;
     let newResult = props.newResult;
     return (
       <div>
         <h1> { heading } </h1>
         <form onSubmit = {onFormSubmit}> 
         <h2> { input1 } </h2>
         <input 
         type="number" min="0" step="1" 
         onChange={e => { setNew1Num( e.target.value ) }}
         value={new1Num}
         className='field' />
          <h2>Operator</h2>
           <select 
           onChange={e => { setNewOper( e.target.value ) }}
           value={newOper}
           className='oper' >
             <option value='add'>+</option>
             <option value='subtract'>-</option>
             <option value='divide'>/</option>
             <option value='multiply'>*</option>
           </select>
           <h2> {input2}</h2>
           <input 
         type="number" min="0" step="1" 
         onChange={e => { setNew2Num( e.target.value ) }}
         value={new2Num}
         className='field' />
         <h2></h2>
         <input type='submit' className='submitBtn success' value='Submit'/>
         <h3>RESULT: 
           {new1Num}
           {newOper} 
           {new2Num} 
           {newResult}
         </h3>
         </form>
       </div>
     );//new1Num and newOper and new2Num are populating inside browser just fine
   }
   export default Calculator