How to hide 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? something you could do is move the scrolling ? null : ... outside of the return and just keep it a variable.

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>
);