How to make a component more readable if it has multiple props as arguments?

Question

I have large component where I am passing data from parent via slots, everything works as expected but I have one big problem which is very irritating to me, How I can to destructure ({partDetails, setUniqValue, openModal, setData, setPrices, setBoxImages, setZoomImage, setSelectedPartDetails}) this arguments so that my component becomes slightly more attractive, I want to achieve this result using typescript, but I am not sure what is best practice for it.

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { MaterialIcons } from "@expo/vector-icons";
import { componentStyle } from '../styles';
import { PickOfferBoxHeader } from './PickOfferBoxHeader/PickOfferBoxHeader';
import { ConditionRow } from './Rows/ConditionRow';
import { WarrantyRow } from './Rows/WarrantyRow';
import { PriceRow } from './Rows/PriceRow';
import { GradeRow } from './Rows/GradeRow';
import { AntDesign } from "@expo/vector-icons";
import { IIIpartDetails } from '../../../controllers/offers/interfaces';
import { IPickpartDetails, IuniqueValue, IPickData, Imodal } from '../../../screens/offers/interfaces';
import { ImagesRow } from './ImageRow/ImageRow';

interface IPickOfferBoxProps {
    partDetails: IPickpartDetails,
    setUniqValue: React.Dispatch<React.SetStateAction<IuniqueValue>>,
    openModal: () => void,
    setData: React.Dispatch<React.SetStateAction<IPickData[]>>
    setPrices: React.Dispatch<React.SetStateAction<number>>
    setZoomImage: React.Dispatch<React.SetStateAction<Imodal>>,
    setSelectedPartDetails:React.Dispatch<React.SetStateAction<IIIpartDetails | undefined>>
    setBoxImages: any,
}

export const PickOfferBox: React.FC<IPickOfferBoxProps> = ({partDetails, setUniqValue, openModal, setData, setPrices, setBoxImages, setZoomImage, setSelectedPartDetails}) => {
    


    return (
        <p>
           asdasdad
        </p>
    );
}

Answer 1

Consider component composition in react. Or you might try something like effector in react to communicate between components, or create local store for this component and it will not need props, you gonna derive them from store.