How to force change value to true in another react component?

Question

JavaScript

There is a button component that, when clicked, changes the value of the state of another component to true. But I get an error
TypeError: setVisiblePopup is not a function

button

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;

component to appear

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;

I can't figure out where is the error?