Medium. Custom react hooks with JSX

AnotherComponent.tsx

import { useCallback, useState } from "react";
import { SmallModal } from "./components/SmallModal";
 
export const AnotherComponent = () => {
  // same code again
  const [isOpen, setIsOpen] = useState(false);

  // same code again
  const toggleOpen = useCallback(() => {
    setIsOpen((isOpen) => !isOpen);
  }, []);
 
  return (
    <>
      <SmallModal 
        isOpen={isOpen}
        text='Second' 
      />
      <div onClick={toggleOpen}>Show bill</button>
    </>
  );
};

Header.tsx

import { useCallback, useState } from "react";
import { SmallModal } from "./components/SmallModal";
 
export const Header = () => {
  const [isOpen, setIsOpen] = useState(false);
  
  const toggleOpen = useCallback(() => {
    setIsOpen((isOpen) => !isOpen);
  }, []);
  
  return (
    <>
      <button onClick={toggleOpen}>Show user</button>
      <SmallModal 
        isOpen={isOpen}
        text='First' 
      />
    </>
  );
};

NewAnotherComponent.tsx

import { useSmallModal } from "./components/SmallModal";
 
export const AnotherComponent = () => {
  const { SmallModal, toggle } = useSmallModal(true);
 
  return (
    <>
      <SmallModal text='Second' />
      <div onClick={toggle}>Show bill</button>
    </>
  );
};

NewHeader.tsx

import { useSmallModal } from "./components/SmallModal";
 
export const Header = () => {
  const { SmallModal, toggle } = useSmallModal(true);
 
  return (
    <>
      <button onClick={toggle}>Show user</button>
      <SmallModal text='First' />
    </>
  );
};

useSmallModal.tsx

import { useCallback, useState } from "react";
import { SmallModal } from "./components/SmallModal";
 
export const useSmallModal: UseSmallModal = (defIsOpen = false) => {
  const [isOpen, setIsOpen] = useState(defIsOpen);
 
  const toggle = useCallback(() => {
    setIsOpen(state => !state)
  }, []);
 
  const Component = useCallback(({ text }) => (
    <SmallModal 
      text={text}
      isOpen={isOpen} 
    />
  ), [isOpen]);
 
  return { SmallModal: Component, toggle };
};