I have a problem making a HOC component with hooks inside.

I am trying to find a correct solution to not break rules-of-hooks.

If I change the name of this component to start with lowercase: withNetworkDetector instead of uppercase, I will not get errors, but did I break the rule then?

Is this code will be secure then?

export const WithNetworkDetector = (Component: FC<{}>) => (props: any) => {
  const [isDisconnected, setIsDisconnected] = useState(false);

  const handleConnectionChange = useCallback(() => {
   ...
    setIsDisconnected(true);
  }, []);

  
  return (
    <div>
      {isDisconnected && (
          <Toast type="warning" text={TOAST_ERRORS.LOST_INTERNET_CONNECTION} />
      )}
      <Component />
    </div>
  );
};