Let’s say I have a component which includes a heading and a button next to it, and I need to use the same component in multiple pages:

const SectionHeader = (props:any) => {
    const {className, buttonTitle, headingLabel, label, onClick} = props;
  return (
    <div className={className}>
          <h1>{headingLabel}</h1>
          <button title={buttonTitle} onClick={onClick}>{label}</button>
        </div>
  )
} 

and this is how I pass the props, instead of passing them one by one:

  const sectionHeaderProps = {
    className:'add-books-heading',
    headingLabel:'Books',
    buttonTitle:'Add book',
    label:'Book',
    onClick:()=>setToggleForm(!toggleForm)
  }

<SectionHeader {...sectionHeaderProps} />

Is passing more than 2-3 props to a component a bad practice? Do I need to split the component into 2? Maybe this is not the best example but I’m sure there’s a situation that requires passing many props without needing to split the component into multiple.