They differ only in the props.primary true / false setting and provide a simple way of having two styles of button.
This could be a simple way of differentiating navigation buttons (that can be pressed without fear of switching something on or off) and action buttons (that will switch something on or off!). Many of the components now have options such as “row” or “column” options from the component menu to save a little work later on.
The other way these are used in application UIs is to highlight the primary and secondary actions such as in a confirmation popup, the OK or Save would be primary and would attract more attention whereas cancel would be less attracting, eg no background fill just a border
As @nminchin said, I typically use the two different types when a user has a choice to make and I want to make one choice appear as a sort of “recommended” option. This forum actually has an example when you’re replying in a thread: note the “Reply” (primary) and “cancel” (secondary) buttons.
Not only is “Reply” much easier to see, but they also capitalized the text because that’s probably the button you are looking for. The “cancel” button is also an option, but it’s probably not what you’re looking for.