Hide Item onScroll React

I’m attempting to hide an item when a user scrolls within a div. The Card component shown is a scrollable component. When the user scrolls within it I want to hide an item. What is the best way to go about this? I’m getting the error: Too many re-renders. Note: Partial code shown

const [scrolling, setScrolling] = useState(false);
    const handleScroll = (e) => {
      setScrolling(true);
    };
    
    return (
      <Card onScroll={handleScroll}>
        {scrolling ? null :  <p> hide me on scroll </p>}
      </Card>
    );

>Solution :

something you could do is move the scrolling ? null : ... outside of the return and just keep it a variable.

Like this:

const [scrolling, setScrolling] = useState(false);
const handleScroll = (e) => {
  setScrolling(true);
};

const item = scrolling ? null :  <p> hide me on scroll </p>
    
return (
  <Card onScroll={handleScroll}>
    {item}
  </Card>
);