React : React children can’t recognize the props passed to it

I am trying to simply pass the props to my component but facing these warning, and it is not rendering properly.

Getting warning as:-

React does not recognize the `reactionsState` prop on a DOM element. If you intentionally 
want it to appear in the DOM as a custom attribute, spell it as lowercase 
`reactionsstate` instead. If you accidentally passed it from a parent component, remove
 it from the DOM element.

Same warning for setReactionsState and postId

ReactionsTab.tsx:

import axios from "axios";
import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
import { Button, Tab } from "react-bootstrap";
import { useElementOnScreen } from "utils/hooks/useElementOnScreen";
import styles from "../styles/reactions.module.css";
import { ReactionListMainState, RenderTitle, UserListItemType } from "./ReactionsList";
import UserListItem from "./UserListItem";

type Props = {
  reactionsState: ReactionListMainState;
  setReactionsState: Dispatch<SetStateAction<ReactionListMainState>>;
  postId: number;
  eventKey: string | null;
};

export default function ReactionTab(props: Props) {
  const { reactionsState, setReactionsState, postId, eventKey, ...rest } = props;
  const [loading, setLoading] = useState(false);

  const [containerRef, isVisible] = useElementOnScreen({
    root: document.querySelector(`#reactionListModal${eventKey}`),
    rootMargin: "0px",
    threshold: 1.0,
  });
  useEffect(() => {
    if (isVisible) {
      console.log("isVisible");
      fetchMoreReactions(eventKey as string);
    }
  }, [isVisible]);
  const fetchMoreReactions = async (type: string) => {
    setLoading(true);
    const size = reactionsState.reactions[type].size;
    const page = reactionsState.reactions[type].number;
    if (reactionsState.reactions[type].last) return;
    const url = `${process.env.REACT_APP_BACKEND_URL}post/getPostReactions?page=${
      page + 1
    }&size=${size}`;
    const response = await axios.post(url, {
      postId,
      type,
    });
    setReactionsState({
      ...reactionsState,
      reactions: {
        ...reactionsState.reactions,
        [type as string]: {
          content: [...reactionsState.reactions[type].content, ...response.data.reactions.content],
          number: response.data.reactions.number,
          size: response.data.reactions.size,
          last: response.data.reactions.last,
        },
      },
    });
    setLoading(false);
  };

  return (
    <Tab
      eventKey={eventKey as string | number}
      className={styles.listContent}
      title={<RenderTitle type={eventKey as string} reactionsState={reactionsState} />}
    >
      <div id={`reactionListModal${eventKey}`}>
        <ul className={styles.userListItemContainer}>
          {reactionsState?.reactions[eventKey as string]?.content.map((user: UserListItemType) => (
            <UserListItem userData={user} key={user.reactedByEmployeeId} />
          ))}
        </ul>
        {!reactionsState?.reactions?.LIKE?.last && (
          <Button ref={containerRef} disabled={loading}>
            {loading ? "Loading..." : "Load more"}
          </Button>
        )}
      </div>
    </Tab>
  );
}