Best practice for repeated react components

Question

I'm building a Gatsby site with Prismic that, as we're getting towards the end of the dev process, is starting to have a fairly large number of components.
I'm wondering, however, what the best practices are for components that are used in multiple places across the site although they might have different props or be accessing GraphQL queries differently? For example, I have a hero component that is used on multiple pages and templates.
In one place it might be used in a Prismic slice, and in another, it might just be a part of a page, without slices.
With that in mind, if I have a heading which would be templated in the slice's iteration using {slice.primary.heading.text}, and a heading outside of Prismic's slices templated using {document.heading.text} I'm, at this point, stuck creating multiple versions of the hero component, one for the slice and another to be used on pages.
While I've had a good bit of experience with React and Gatsby over the last year, I'm still new to best practices.
Is this the correct way to do it, using multiple components, or is there a better way to accomplish this?