Graph not returning after OnClick - reactjs

Question

I am trying to plot this graph on react. My graph is not displaying after OnClick. Can anyone let me know my mistake.
Or if there is any other way or method to display graphs on React, please let me know.
I have defined a function, and called it in OnClick. I have also imported all the necessary libraries. I don't see where I am going wrong. I don't get any errors.
Any help would be appreciated.
import React from "react";
import Plot from 'react-plotly.js'
import Heading from 'react-plotly.js'
import LineSeries from 'react-plotly.js'
import Axis from 'react-plotly.js'
import factor from 'react-plotly.js'
import Legend from 'react-plotly.js'
function Example () {
<Plot
width={550}
height={500}
margin={{ bottom: 50, left: 90, top: 50, right: 100 }}
>
<Heading
title="Electrical characterization"
subtitle="current vs voltage"
/>
<LineSeries
data={[
{ x: 0, y: 0 },
{ x: 1, y: 1 },
{ x: 2, y: 2 },
{ x: 3, y: 3 },
{ x: 4, y: 3 },
{ x: 5, y: 3 },
]}
xAxis="x"
yAxis="y"
lineStyle={{ strokeWidth: 3 }}
label="Vg = 7V"
displayMarker={false}
/>
<LineSeries
data={[
{ x: 0, y: 0 },
{ x: 1, y: 1 },
{ x: 2, y: 2 },
{ x: 3, y: 3 },
{ x: 4, y: 3 },
{ x: 5, y: 3 },
]}
xAxis="x"
yAxis="y"
displayMarker={true}
markerShape="circle"
label="Vg = 3V"
/>
<Axis
id="x"
position="bottom"
label="Drain voltage [V]"
displayPrimaryGridLines
max={6.1 / factor}
/>
<Axis
id="y"
position="left"
label="Drain current [mA]"
displayPrimaryGridLines
max={6.1 * factor}
/>
<Legend position="right" />
</Plot>
return (
<div className="input-group-append">
<button className="btn btn-sm btn-primary" onClick={Example}>Graph</button>
</div>
)
}
export default Example;