How to select the active slide and a table element using JS React?

I am a beginner in web development. As part of an exercise I would like to modify the javascript code of the link below. I would like to make the button elements clickable.

https://codepen.io/hexagoncircle/pen/jgGxKR?editors=0010

  const slide1Button = document.querySelector('.btn'); 
  slide1Button.addEventListener('click', function() {
  window.open(slideData[0].url);
  }); 


  const slide2Button = document.querySelector('.btn'); 
  slide2Button.addEventListener('click', function() {
  window.open(slideData[1].url);
  }); 

const slideData = [
{
  index: 0,
 
  button: 'VISITER',
  url: 'https://www.interflora.fr/',
  src: 'https://lecoqetlecerisier.files.wordpress.com/2011/05/dsc037411.jpg' },
 

{
  index: 1,

  button: 'VISITER',
  url: 'https://www.123fleurs.com/',
  src: 'http://idata.over-blog.com/1/39/34/32/Poitiers-Ici-et-La/Macro-fleur-rose.JPG' },

{
  index: 2,

  button: 'VISITER',
  url: 'https://www.aquarelle.com/',
  src: 'http://monmondevirtuel.m.o.pic.centerblog.net/o/91d323e8.jpg' },

{
  index: 3,

  button: 'VISITER',
  url: 'https://www.florajet.com/',
  src: 'http://www.juille.com/images/006_3.JPG' }
];

I have added the code

It works halfway, because I can't determine that for slide current it selects the button and on click redirects according to the url written in the slideData table.

this only selects the first url of the table i want to make the element interactive and have it follow the current slide.

If anyone can help me or advise me in my approach.

You can add an onClick event on the button in the Slide component itself.

Slide Component -> render()

<button className="slide__action btn" onClick={() =>  window.open(url, '_blank')}>{button}</button>

Don't forget to import url prop into the Slide Component

const { src, button, headline, index, url  } = this.props.slide

Here is a working example : CodePen.