Как заставить этот UseVisibility Toggler работать в React?

Я пытаюсь использовать функциональный компонент для переключения видимости элемента в моем коде. Элемент будет управляться кнопкой (которая в настоящее время ведет к ./. Кнопка определяется как еще один отдельный компонент.

Всего четыре взаимодействующих компонента.

Используя инструменты разработчика React, я вижу, что хук включен, и могу вручную изменить состояние, но кнопка не работает.

Как передать логику переключения на кнопку?

UseVisibilityToggler.JS //Моя многоразовая функция-переключатель

import React, {useState} from 'react' 

const useVisibilityToggler = (component, visibility = false) => {

const [visible, setVisibility] = useState(() => visibility);

return [ visible ? component : null, () => setVisibility((v)=> !v) ];
};

export default useVisibilityToggler;

Fuse.JS //Главная страница, содержащая div, который нужно отобразить/скрыть

import React from 'react';
import './Fuse.css';
import LendBorrow from '../LendBorrow';
import Button from '../Button';
import toggleVisibility from '../useVisibilityToggler';

function Fuse() {

const [lendBorrowComponent, toggleVisibility] = useVisibilityToggler( <LendBorrow />        true );

return (
    <div className="fuse-container">


        <div className="fuse-card">
            <div className="col">Olympus Pool</div>
            <div className="col">3.3</div>
         
            <Button
              className='btn'
              buttonStyle='btn--outline'
              buttonSize='btn--medium'
              onClick={toggleVisibility}
             >
              OPEN
            </Button>
        </div>

       {lendBorrowComponent} //This is the target to toggle

    </div>
)
}
export default Fuse

LendBorrow.Js // Уже импортировано в Fuse. Компонент, который я хочу скрыть/показать с помощью переключателя.

import React from 'react'
import './LendBorrow.css'

function LendBorrow() {
return (
    <div>

        <div className="lend-borrow-card">
         <div className="col">Olympus Pool</div>
         <div className="col">3.3</div>
         <div className="col">$47,094,315.69</div>
         <div className="col">$4,808,015</div>
         <div className="col">B</div>
        </div>
        
    </div>
)
}

export default LendBorrow

Button.js

//Компонент кнопки, определенный таким образом, чтобы обеспечить различные другие функции, такие как управление доступом к меню для мобильных устройств

import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';
import useVisibilityToggler from './useVisibilityToggler';

const STYLES = ['btn--primary', 'btn--outline'];
const SIZES = ['btn--medium', 'btn--large'];

export const Button = ({
children,
type,
onClick,
buttonStyle,
buttonSize
}) => {
const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0];
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];

if (STYLES[1] && children === 'FUSE') {
    return (
        <Link to='/Fuse' className='btn-mobile'>
            <button
            className={`btn ${checkButtonStyle} ${checkButtonSize}`}
            onClick={onClick}
            type={type}
            >
                {children}
            </button>
            </Link>

            
    )} 

else if (STYLES[1] && children === 'ASSET POOLS') {
    return (
        <Link to='/Pools' className='btn-mobile'>
            <button
            className={`btn ${checkButtonStyle} ${checkButtonSize}`}
            onClick={onClick}
            type={type}
            >
                {children}
            </button>
            </Link>

            
    )}

    else if (STYLES[2] && children === 'OPEN') {
        return (
          
               <button
                className={`btn ${checkButtonStyle} ${checkButtonSize}`}
                onClick={toggleVisibility}
                type={type}
                >
                    {children}
                </button>
             
        )}

  return (
    <Link to='/' className='btn-mobile'>
        <button
        className={`btn ${checkButtonStyle} ${checkButtonSize}`}
        onClick={onClick}
        type={type}
        >
            {children}
        </button>
        </Link>

        
);

};

export default Button