Как заставить изменить значение на true в другом компоненте react?

Question

[Максим js]

есть компонент кнопка, которая при клике меняет значение состояния другого компонента на true. Но вылазит ошибка
TypeError: setVisiblePopup is not a function

кнопка

import React from 'react';
import './List-button.scss';


const ListButton = ({items, setVisiblePopup}) => {
  return  <button onClick={() => setVisiblePopup(true)} className="todo-header-plus" title="Создать список дел">
    {
      items.map((item,index) => (
        <i key={index}>{item.icon}</i>
      ))
    }
  </button>
}


export default ListButton;

компонент который должен появиться

import React, {useState} from 'react';
import './List-popup.scss';



const AddList = (onClick) => {
  let [visiblePopup, setVisiblePopup] = useState(false);
  return visiblePopup && (<div className="list-popup">
    <h1>123</h1>
  </div>)

}

export default AddList;

не могу понять где ошибка то?