Custom render for table row

[Mudassirmh119]

I am using Ant Desing in Vue3. While using an ant-design table component, I want to use my custom component for each row inside the table component. In that custom component, I am polling an API for each row and maintaining some states in that component.
What's happening right now is that when I am using my custom component in the bodyCell slot, it's creating a custom component for each cell and that is not the result I desire.

For Example:
If I have 4 columns and 4 rows in my table, I only want 4 custom-component to be rendered but I am having 16 right now.

Is there any Custom Rendererfor the table row or any workaround for my use case?

The code below is what I am trying to do right now but unable to achieve what I desire.

<template #bodyCell="{ index, column, record }">
  <custom-component
    :item="record"
    :column="column"
    :index="index"
  >
  </custom-component>
</template>