I am trying to call a function that contains hooks from a button's event handler. I thought that using useCallback would work well for this, but I seem to be getting an error with this.

Below is a rough version of what I am attempting and have verified this to also cause my issue:

component.jsx

import React, { useCallback } from 'react';
import { testCall } from "./hooks"


const content = () => {
  const callOtherFunc = useCallback(async () => {testCall("test")},[],)

  return (
    <div>
      <button onClick={callOtherFunc()}>Click me</button>
    </div>
  )

}

hooks.jsx

import React from 'react';


export function testCall(props){
    const [value, setValue] = React.useState("");
    setValue(props)

    console.log(value)
}

Error:

Unhandled Rejection (Error): Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app