Fixed react component for test review

react_file.tsx

import React, {useEffect, useMemo} from 'react';
import {shallowEqual, useDispatch, useSelector} from 'react-redux';
import {getBundle} from './redux/actions';
import {bundleSelector} from './redux/selectors';
import PLLoader from '@/components/shared/atoms/PLLoader';
import SingleKpiDelta from '@/components/shared/atoms/SingleKpiDelta';
import SingleKpiSparkline from '@/components/shared/atoms/SingleKpiSparkline';
import SingleKpi from '@/components/shared/atoms/SingleKpi';
import {KPI_TYPE} from '@/interfaces';
import styles from './styles.less';

type TBundleProps = {
    id: string;
};

const Bundle = ({id}: TBundleProps) => {
    const dispatch = useDispatch();
    const {bundles, get_bundle_loading} = useSelector(bundleSelector, shallowEqual);

    const {kpi} = bundles[id] || {};
    const loading = get_bundle_loading && !bundles[id];

    const [maxGridRow, maxGridColumn] = useMemo(
        () =>
            kpi
                ? kpi.reduce(
                      ([prevWidth, prevHeight]: number[], cur) => {
                          const {position} = cur;
                          const [width, height] = position;
                          return [width > prevWidth ? width : prevWidth, height > prevHeight ? height : prevHeight];
                      },
                      [0, 0]
                  )
                : [],
        [kpi]
    );

    useEffect(() => {
        if (id) {
            dispatch(getBundle(id));
        }
    }, [dispatch, id]);

    if (loading) {
        return <PLLoader />;
    }

    return (
        <div
            className={styles.content}
            style={{
                gridTemplateColumns: `repeat(${maxGridColumn}, 1fr)`,
                gridTemplateRows: `repeat(${maxGridRow}, 1fr)`
            }}
        >
            {kpi?.map((element: any) => {
                const {position, type, delta, sparkline, id} = element;
                const [x, y] = position || [0, 0];

                const isDelta = type === KPI_TYPE.DELTA;
                const isSparkline = type === KPI_TYPE.SPARKLINE;
                const isStandard = type === KPI_TYPE.STANDARD;

                return (
                    <div
                        key={id}
                        style={{
                            gridRowStart: x,
                            gridColumnStart: y,
                            width: '100%',
                            ...((isDelta && delta.templateId !== 1) || isSparkline ? {gridColumnEnd: y + 2} : {})
                        }}
                    >
                        {isDelta && (
                            <SingleKpiDelta
                                wrapperClass={styles.itemWrapper}
                                templateId={delta.templateId}
                                kpi={element}
                            />
                        )}
                        {isSparkline && (
                            <SingleKpiSparkline
                                wrapperClass={styles.itemWrapper}
                                templateId={sparkline.templateId}
                                kpi={element}
                            />
                        )}
                        {isStandard && <SingleKpi kpi={element} wrapperClass={styles.itemWrapper} />}
                    </div>
                );
            })}
        </div>
    );
};

export default Bundle;