I need Help to Solve React-Router-Dom in Spfx Issue : when i click on Button at that time it changes Parent routing also and create new routing

[vaidik2626]

What type of issue is this?

Question

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Target SharePoint environment

SharePoint Online

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• browser version
• SPFx version
• Node.js version
• etc

Issue description

when i click on Button at that time it changes Parent routing also and create new routing

This is my Code:
<button className="button" onClick={() => handleChartClick(chartData.lineChart)}>
Line Chart

<button className="button" onClick={() => handleChartClick(chartData.pieChart)}>
Pie Chart

<button className="button" onClick={() => handleChartClick(chartData.columnChart)}>
Column Chart

<button className="button" onClick={() => handleChartClick(chartData.scatterPlot)}>
Scatter Plot Chart

<button className="button" onClick={() => handleChartClick(chartData.areaChart)}>
Area Chart

<button className="button" onClick={() => handleChartClick(chartData.stackedColumnChart)}>
Stacked Column Chart