Way to manage props simply in the react atomic design pattern

Question

I have adopted the Atomic Design Pattern in my React project and am using it with TypeScript.

However, when props come down from pages to atoms, there are frequent situations where up to 5 depths are reached.

In this situation, if one of the props received from pages is changed, the type of a single prop must be changed in each of the five components. I think this is a very inefficient operation.

It's been a while since I've applied the atomic design pattern, so I might be using it wrong, so please advise.

Below is the folder structure of my current project.
my project's struct

I'm using interface like this.

interface Props {
  remainTime?: string;
  voteData?: VoteResultState;
  height: number;
  isSticked: boolean;
  state: [string, React.Dispatch<React.SetStateAction<string>>];
  promotionRankData?: {
    data: PromotionDataTemp;
    voteOnclick: (id: number) => void;
    shareOnClick: (id: number) => void;
    scrollID?: number;
  };
}

function DailyVoteRank({
  remainTime,
  voteData,
  height,
  isSticked,
  state: [tabState, setTabState],
  promotionRankData,
}: Props) {
...

I want to be less annoying when refactoring and easier to fix. TypeScript's interface is both helping and bothering me.

I tried to use a global state management library, but it had the negative effect of making the code more complicated.