Why Customer History Api is hitting two times here? How do i prevent this?

Question

I Have a Customer Details Page which is getting by customerId and customer have a history details which also getting by customerId. So I have Created a Two Component CustomerDetails and CustomerHistory. in CustomerDetails im getting customer details. and in CustomerHistory getting some history. CustomerHistory is a separate component also separate api. I have called CustomerHistory component in CUstomerDetails component. Now Problem is CustomerHistory api is calling two times. as i see component is also rendering two times. How can prevent this?

Note: I don't want to call CUstomerHistory api in CustomerDetails. Any Solution

const CustomerDetails = () => {
  const params = useParams();
  const dispatch = dispatch();
  const customerEntity = useSelector(state => state.customer.entity);

  useEffect(() => {
    if (params?.id) {
      dispatch(getCustomerDetails(params?.id));
    }
  }, [params?.id]);

  return (
    <Page title="Customer Details">
        <div>
            <Text variant="bodyMd" as="p">
              {customerEntity?.email}
            </Text>
            <CustomerHistory customer={params?.id} />
        </div>
    </Page>
  );
};

THis Component is Rendering Two Times.

const CustomerHistory = props => {
  const dispatch = dispatch();
  const location = useLocation();
  const navigate = useNavigate();
  const [currentPage, setCurrentPage] = useState(0);

// This Api is hitting two times.
  useEffect(() => {
    if (props.customer) {
      dispatch(
        getCustomerHistoryById({
          customer: props.customer,
          filter: {},
          page: currentPage,
          size: 10,
        })
      );
    }
    const endURL = `?page=${currentPage}`;
    if (location.search !== endURL) {
      navigate(`${location.pathname}${endURL}`);
    }
  }, [currentPage, props.customer]);

  return (
    <Fragment>
      <h1>Customer History List</h1>
    </Fragment>
  );
};