How can use input value in innerHTML in react-js?

I Defined three file..I want input value in innerHTML show threw button.but I getting not work in innerHTML.So please sugesstion answer.thank you!

////////////index.html
<div id="root"></div>
<div id="root2"></div>
<div id="root3"></div>
<input id="inpt" type="number" />
<button onclick="MyClick()">Click here</button>

////////////index.js file
import React from "react";
import ReactDom from "react-dom?client";
import {Stricks_} from "./App"
export function Strick1_(){
return(
<>
<span></span>
<Stricks_/>
</>
)
}
const root = ReactDom.createRoot(document.getElementById("root"));
root.render(<Strick1_ />);

////////////App.js file
`import reactDom from "react-dom";
export function Stricks_()
const inputs = document.getElementById("input");
const roots = document.getElementById("root3");
function MyClick() {
const vale = inputs.value;
roots.innerHTML = vale;
}

}
const root = reactDom.createRoot(document.getElementById("root"));
root.render();
`