Below code is a custom Hook called useToggle from a website, it's defined as a custom hook that can be useful when showing/hiding a modal but I don't understand why to go through such code for such a simple feature. Isn't it better to just use useState()

useToggle custom hook

import { useCallback, useState } from 'react';
// Usage
function App() {
    // Call the hook which returns, current value and the toggler function
    const [isTextChanged, setIsTextChanged] = useToggle();
    
    return (
        <button onClick={setIsTextChanged}>{isTextChanged ? 'Toggled' : 'Click to Toggle'}</button>
    );
}
// Hook
// Parameter is the boolean, with default "false" value
const useToggle = (initialState = false) => {
    // Initialize the state
    const [state, setState] = useState(initialState);
    
    // Define and memorize toggler function in case we pass down the component,
    // This function change the boolean value to it's opposite value
    const toggle = useCallback(() => setState(state => !state), []);
    
    return [state, toggle]
}

Just using normal useState()

const [shouldDisplayModal, setShouldDisplayModal] = useState(false);

<>
    {shouldDisplayModal && (
      <Modal>
        <ModalContent
          modalText={messageContent}
          primaryButtonText={buttonText}
          secondaryButtonText={NO_MESSAGE}
          modalIconState={modalIconState}
          handleClick={toggleSaveModal}
        />
      </Modal>
    )}
        <Button handleClick={toggleSaveModal} mainButton={false}>
          Save
        </Button>
        <Button handleClick={togglePublishModal} mainButton={true}>
          Publish
        </Button>

  </>