I have a React component:

type SidebarButtonProps = {
    isCollapsed: boolean,
}

export default function SidebarButton(props: SidebarButtonProps) {
    return (
        <>
            <img src="xxx.jpg" />

            <div className={`${props.isCollapsed ? 'hidden' : 'flex'}`}>
                ABCD
            </div>
        </>
    )
}

The problem:

when the prop isCollapsed changes from its parent component, this child component re-renders as a whole, so not only the div re-renders, the <img> as well. As a result, the image flashes for an instant, which is very weird.

Desired output:

How do I make this component only re-render its div but not the img when its props change?

Thanks in advance!