Rendering 3 different components based on click of buttons - reactjs

Question

I am new to react and need some help on understanding using hooks. I have 3 views I want to render based on 3 different components I want to render based on different TEXT buttons. The buttons would in the same location throughout the components but different text on them!
Component the view will switch from:
const Original = () => {
const [button1, setButton1] = React.useState("button1");
const [button2, setButton2] = React.useState("button2");
const testOriginal = () => {};
const originalView = () => {
setButton1("buttonview1");
setButton2("buttonview2");
return "<div>View 0<button></button><button></button></div>";
};
const view2 = () => {
setButton1("button11view2");
setButton2("button12view2");
return "<div>View 2<button></button><button></button></div>";
};
const view3 = () => {
setButton1("button21view3");
setButton2("button22view3");
return "<div>View 2<button></button><button></button></div>";
};
const ActiveView = () => {
switch (active) {
case 1:
return originalView;
case 3:
return view3;
default:
return view2;
}
};
return ({
ActiveView()
});
};
export default Original;
const View1 = () => {
return <div>View 1</div>;
};
const View2 = () => {
return <div>View 2</div>;
};
export default View2;
const View3 = () => {
return <div>View 3</div>;
};
export default View3;