React Numeric Input Sum Calculator

the following code is a dynamic sum calculator made in ReactDOM
extracted from codepen https://codepen.io/tfbrown/pen/zjXvZy

class NumericInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      num1: 0,
      num2: 0,
      result: 0
    };
    this._changeNum1 = this._changeNum1.bind(this);
    this._changeNum2 = this._changeNum2.bind(this);
  }
  
  _changeNum1(e) {
    if (e.target.validity.valid) {
      var newNum1 = +(e.target.value)
      this.setState({
          num1: newNum1,
          result: newNum1 + this.state.num2
        }); 
    }
  }
  
    _changeNum2(e) {
    if (e.target.validity.valid) {
      var newNum2 = +(e.target.value)
      this.setState({
          num2: newNum2,
          result: this.state.num1 + newNum2
        }); 
    }
  }

  render() {
    return (
      <div>
        <div>
          <p>first number:</p>
          <input type="number" value={this.state.num1} onChange={this._changeNum1} step="any" />
        </div>
        <div>
          <p>second number:</p>
          <input type="number" value={this.state.num2} onChange={this._changeNum2} step="any" />
        </div>
        <p>Result: {this.state.result}</p>
      </div>
    )
  }  
}  

// The following is boilderplate JavaScript
ReactDOM.render(<NumericInput />, document.getElementById("main"));

the problem is that I want to use this code but my project is made in Next.js and I would like to make this code functional in the .js file without the need for an html DOM making it functional in this index.js file.

import { useWeb3React } from "@web3-react/core"
import { useEffect } from "react"
import { injected } from "../components/wallet/Connectors"
import Web3 from 'web3'
import { Icon } from '@iconify/react';
import React, { useState } from "react";

export default function Home() {
 
    return (

  
    )

}