I have a custom hook that has a bunch of related values and functions that returns a component that requires those values and functions. Currently, I have it in a single hook because it is much cleaner than the alternative.

I've placed random numbers for illustration.

OPTION 1: currently preferred single cleaner hook that returns components

const customHook = ({ dep1, dep2, ...deps}) => {
   // a bunch of related stuff
   return {
      val1,
      ...,
      val9,
      func1,
      ...,
      func5,
      component1: val3 && <Component1 val1={val1} ..... val6={val6} />,
      component2: val5 && <Component2 val1={val1} ..... val6={val6} func1={func1} ... func={func5}/>
   }
}

// component
const MyComponent = () => {
  const { ...vals, component1, component2 }= cusotmHook({ ...deps})

  return (
     <Stuff>
       {component1}
       {component2}
     </Stuff>
  )
}

OPTION 2: alternative to use hook and create components separately

import customHook from './customHook'
import {Component1, Component2} from './Components'
const MyComponent = () => {
  const { vals.... } = customHook({ ...deps })

  return (
     <Stuff>
       <Component1 {...listOfValuesFromHook} />
       <Component2 {...listOfValuesFromHook} />
     </Stuff>
  )
}

I find option 2 to be more cumbersome (obviously simplified for our situation), is this too much of an anti-pattern? Is there a better way to keep it clean without having to pass a large props array to component1, 2, etc.?