[Update]: I have forgotten to include the CustomHooks component and the error has disappeared. Now the problem is the input values are not rendering in MyJobList component.

The issue
In my React project, I'm getting TypeError
(0 , _customhooks.default) is not a function error when I pass the props to the components. It is possible that I am passing the data incorrectly, or perhaps I am missing some bits of codes.

Here are the codes (I have minimized the codes to highlight the main problem. You can view my full codes in the link below):

newlist.js

const NewList = () => {
  const [inputState, setInputState] = useState({});
  const onSubmitList = () => {
    setInputState({
      positionTitle: `${inputs.positionTitle}`,
      companyName: `${inputs.companyName}`,
      jobLink: `${inputs.jobLink}`
    });
  };

  const { inputs, handleInputChange, handleSubmit } = CustomForm(onSubmitList);

myjoblist.js

const MyJobList = inputs => (
  <div>
    <h3>{inputs.positionTitle}</h3>
    <p>{inputs.companyName}</p>
    <p>{inputs.jobLink}</p>
  </div>
);

navbar.js

const Navbar = inputState => (
  <Router>
    <Switch>
      <Route path="/my-list">
        <MyJobList inputs={inputState} />
      </Route>
    </Switch>
  </Router>
);

What do I expect?
In the NewList component, I can create a new job list by entering the inputs and when I submit it, the input values should be rendered on the MyJobList component.

What's actually happening?
I am getting TypeError
(0 , _customhooks.default) is not a function error message on the web page and the console is pointing to the NewList component. In my local environment, I don't have this error, however, nothing is rendering when I submitted the input entry.

Things I tried
I tried to remove the object restructuring (curly braces, in other words) in the parameters. I also tried googling the problem but it does not lead me to the solution.

Any help and guidance provided are greatly appreciated!

Here's a link to complete code: Code Sandbox