Component with array.map (data) not show in modal pop up

I have problem, Why the component not show, in modal i want to show many data.

I want to get data from api, and data show in modal when i click. i create my code like this.

State

  const [visible, setVisible] = useState(false);

  const toggleVisible = () => {
     setVisible(!visible);
  };

  const [app, setApp] = useState([])

 useEffect(() => {
   const getApps = async () => {
     try {
       const response = await    
       axios.get("http://192.168.20.2:3000/api/V1/application")
       setApp(response.data)
     } catch (error) {
       console.log("Error cannot get api application")
     }
   }

   if (visible) {
     getApps()
   }
 }, [visible])

return value

return (
<div>
  <div className="font-sans">
    <Modal
      open={visible}
      onClickBackdrop={toggleVisible}
      className="w-11/12 max-w-7xl space-y-10 px-24 pb-20"
    >
      <Modal.Header>
        <div className="grid grid-cols-2">
          <div className="grid col-span-1 place-content-start">
            <h1 className="text-4xl font-bold">Smart</h1>
          </div>
          <div className="grid col-span-1 place-content-end">
            <Form>
              <Input className="rounded-full" bordered type="text" placeholder="Search" />
            </Form>
          </div>
        </div>
      </Modal.Header>
      <Modal.Body className="space-y-10">
        <div className="grid grid-cols-3">
          {
            app?.map(app => {
              <ProductCard
                title={app.title}
                subTitle={app.subTitle}
              />
            })
          }
        </div>
      </Modal.Body>
    </Modal>
  </div>
</div>

);

but, the component still now show. i'm use .map, but still now show that component. thanks before.

Note : Api : 200 ok