How to pass information from components to components in React?

I have two components named <Add /> and <Modal>. In the <Add /> component I have a state for the click event on the component. When <Add /> is clicked, I set the state to true. I want to use that state information in the <Modal /> component.

I want to hide the modal based on the information from the <Add /> component's state. How can I achieve that?

This is the <Add /> component:

export default function Add() {
  const [clicked, setClicked] = useState(false)
  return(
    <div onClick={() => setClicked(true)} className={`bg-blue-500 inline-block p-4 fixed bottom-10 right-8`}>
      <FaPlus />
    </div>
  )
}

This is the <Modal /> component:

export default function Modal1() {
  return (
    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 translate-y-3/4">
      <div className="w-[300px] border p-4 rounded-md shadow-lg">
        <div className="inline-block my-4">
          <label className="text-xs opacity-70">Class Name</label>
          <input
            className="border py-2 px-4 rounded-md w-full"
            type="text"
            placeholder="Class Name"
          />
        </div>
        <div className="flex flex-col mb-4">
          <label className="text-xs mr-4 opacity-70">Image</label>
          <input
            className="rounded-md opacity-80"
            type="file"
            placeholder="Image"
          />
        </div>
        <div className="flex flex-row items-center justify-end">
          <button className="bg-slate-400 rounded-md px-4 py-2 mx-4 text-white">
            Cancel
          </button>
          <button className="bg-blue-500 px-4 py-2 rounded-md text-white">
            Add
          </button>
        </div>
      </div>
    </div>
  );
}

And this is the index.js file:

export default function Home() {
  return (
    <div className="relative">
      <Add />
      <Modal />
    </div>
  );
}

I imported the components correctly. And I'm using Next.js and tailwindcss.

Solution(Edited):

index.js file:

export default function Home(props) {
  const [modalShown, setModalShown] = useState(false)
  return (
    <div className={`relative`}>
      <AddButton modalShown={modalShown} setModalShown={setModalShown} />
      <Modal1 modalShown={modalShown} setModalShown={setModalShown} />
    </div>
  );
}

<AddButton /> component:

export default function AddButton({modalShown, setModalShown}) {

  return(
    <div onClick={() => setModalShown(true)} className={`z-[99] bg-blue-500 inline-block p-4 rounded-full fixed bottom-10 right-8 cursor-pointer`}>
      <FaPlus />
    </div>
  )
}

<Modal /> component:

export default function Modal({modalShown, setModalShown}) {

  const [modalShown, setModalShown] = useState(true);

  return (
    <div className={`${modalShown? '' : 'hidden'} transition-all duration-300 ease-in absolute top-1/2 left-1/2 -translate-x-1/2 translate-y-3/4 select-none`}>
      <div className="w-[300px] border p-4 rounded-md shadow-lg">
        // Text inputs here
        ...
        ...
        <div className="flex flex-row items-center justify-end">
          <button onClick={() => setModalShown(false)} className="bg-slate-400 rounded-md px-4 py-2 mx-4 text-white">
            Cancel
          </button>
          <button onClick={() => setModalShonw(false)} className="bg-blue-500 px-4 py-2 rounded-md text-white">
            Add
          </button>
        </div>
      </div>
    </div>
  );
}