I'm trying to use react hooks to create a hover to appear a div and i'm having this issues:

Line 69:31: React Hook "useState" is called in function "renderHideOptionalClauseTrigger" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

Here is my code base:

import React, { useState, useEffect } from "react";

const renderHideOptionalClauseTrigger = () => {
  const [inHover, setHover] = useState(false);

  return (
    <div className="my-option-clause">
      <text>My Optional Loan Clause</text>
      <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
      >
        <path fill-rule="evenodd" clip-rule="evenodd" d="..."/>
      </svg>
    </div>
  );
};


function LoanTerms(props) {
  const router = useRouter();
  const {
    currentLoan,
    getUserLoanRequest,
    updateUserLoanProposalRequest,
    user,
  } = props;

return (

<>
...
                  <Collapsible
                    trigger={renderOptionalClauseTrigger()}
                    classParentString="opt-data"
                    overflowWhenOpen="visible"
                    triggerWhenOpen={renderHideOptionalClauseTrigger()}
                  >

                    <div className="FlowCard__info-text">
                      Will be added verbatim as last clause to the loan
                      agreement. See{" "}
                      <Link className="orange-link" to="/product">
                        Product page
                      </Link>{" "}
                      for other clauses. (1000 characters)
                    </div>
<>