Open a new component when the register button is clicked - reactjs

Question

Open as a new page and the user goes inside the page when the button is clicked. How can I do it in react functional component? I want to navigate from Register to another MyProfile component when button is clicked. The code for Register component is as below:
import React, { useState } from 'react'
import './Register.css'
import axios from 'axios'
import { useHistory } from 'react-router-dom'
function Register() {
const history = useHistory();
const [data, setData] = useState({
name: "",
email: "",
password: "",
confirmpassword: "",
});
const register = (e) => {
e.preventDefault();
history.push("/myprofile")
}
const InputEvent = (event) => {
const { name, value } = event.target;
setData((preVal) => {
return {
...preVal,
[name]: value,
};
});
};
const formSubmit = (e) => {
e.preventDefault();
};
return (
<div className="signup__container">
<div className="signup__containerInfo">
<h1 className="h1__swari">swari</h1>
<hr />
</div>
<form4 onSubmit={formSubmit}>
<h5 className="h5__form"> Name</h5>
<input type="text" placeholder="Full Name" name="name" value={data.name} onChange={InputEvent} />
<h5 className="h5__form"> Email-Address </h5>
<input type="Email" placeholder="Email" name="email" value={data.email} onChange={InputEvent} />
<h5 className="h5__form"> Password </h5>
<input type="Password" placeholder="Password" name="password" value={data.password} onChange={InputEvent} />
<h5 className="h5__form"> Confirm Password </h5>
<input type="Password" placeholder="Confirm Password" name="confirmpassword" value={data.confirmpassword} onChange={InputEvent} />
<p>
<button onClick={register} type="submit" className="signup__registerButton" >Register Now</button>
</p>
</form4>
</div>
)
}
export default Register

Answer 1

Make a separate component of History.js
import { createBrowserHistory } from 'history';
export default createBrowserHistory();
Then in Register component.
import history from "../Shared/history";
const formSubmit = e => {
e.preventDefault();
history.push("/SomeComponent", {
someData: true,
otherData:{},
});
};
In Routes:
<Route path="/SomeComponent" component={Component} />