Hey I have the follow issue, when I click in the buttons they don’t go to your function.
I don’t understand what is wrong.

code:

import { useEffect, useState, useRef } from 'react';
import './feed.css';
import esquerda from '../../img/esquerda.png'
import image1 from '../../img/sagwabooks-carrossel-1.jpeg'
import image2 from '../../img/sagwabooks-carrossel-2.jpeg'

const Feed = () => {
  const carousel = useRef(null);

  const handleLeftClick = (e) => {
    console.log("entrou")
    e.preventDefault();
    carousel.current.scrollLeft -= carousel.current.offsetWidth;
  };

  const handleRightClick = (e) => {
    console.log("entrou2")
    e.preventDefault();

    carousel.current.scrollLeft += carousel.current.offsetWidth;
  };


  return (
    <div className="container">
      <div className="logo">
      </div>
      <div className="carousel" ref={carousel}>
        
        <div className="item" key={1}>
            <div className="image">
            <img src={image1} alt="image1" />
            </div>
        </div>

        <div className="item" key={2}>
            <div className="image">
            <img src={image2} alt="image2"/>
            </div>
        </div>
    </div>

     <div className="buttons-left">
        <button onClick={handleLeftClick}>
          <img className="img-esquerda" src={esquerda} alt="Scroll Left" />
        </button>
    </div>
    <div className="buttons-right">
        <button onClick={handleRightClick}>
          <img className="img-direita" src={esquerda} alt="Scroll Right" />
        </button>
    </div>

    </div>
  );
}

export default Feed;

how you see when I click in the button it should go to function handleLeftClick but it won’t, I don’t know what is wrong

 <button onClick={handleLeftClick}>