How to pass data from one component to store that in another component in react

I am new to react and building some pages. I have two separate index.tsx files under different folder but both folders have same parent folder.
I want to pass data from one index.tsx file after search button is clicked and save those values in another index.tsx.
These values are not drop down items and are not hardcoded in first index.tsx file. These are coming from API’s and whatever user selects from that dropdown I need to pass to another index.tsx.

I was looking for props but that all examples I saw were using HTML to send and receive the data and preview on screen but I don’t want to preview that instead of that I want to store those values in a variable in second index.tsx.

My code:

Note: This is not all of the code just a part of it. Also we have inbuild libraries to maintain standards so the syntax may differ from global syntax.

First index.tsx


import React, { useState, useEffect, useRef } from "react";

const Nemis3cOutboundConfig = () => {

const [statesApiResponse, setStatesApiResponse] = useState<StateModel[]>([]);
const [jsonViewResponse, setJsonViewResponse] = useState<JSON>();

const [outboundJson, setOutboundJson] = useState<JSON>();

const stateRef = useRef<HTMLDivElement>(null);
const [selectedState, setSelectedState] = useState<IDropdownItem>(undefined);
const [stateList, setStateList] = useState<IDropdownItem[]>([]);

const typeOfClaimRef = useRef<HTMLDivElement>(null);
const [selectedTypeOfClaim, setSelectedTypeOfClaim] = useState<IDropdownItem>(undefined);
const [typeOfClaimList, setTypeOfClaimList] = useState<IDropdownItem[]>([]);

const fileTypeIdRef = useRef<HTMLDivElement>(null);
const [selectedFileTypeId, setSelectedFileTypeId] = useState<IDropdownItem>(undefined);
const [fileTypeIdList, setFileTypeIdList] = useState<IDropdownItem[]>([]);


return (
       <>
        <LoadingIndicator
            loading={submitted}
            displayOverlay={true}
            size="l"
            loadingText={"Loading, Please Wait..."}
        >
            <Card
                header={
                    <H3Styles>
                        <h1>Outbound Config</h1>
                    </H3Styles>
                }>
                <hr />
                <form onSubmit={onSubmit}>
                    <div className="row">
                        <div ref={stateRef} className="col-3">
                            <FormControl
                                id="state"
                                error=""
                                required
                                className={"mt-m mb-m"}
                            >
                                <Label>State</Label>
                                <Dropdown
                                    type="single"
                                    items={stateList}
                                    value={selectedState}
                                    onChange={setSelectedState}
                                />
                            </FormControl>
                        </div>
                        <div ref={typeOfClaimRef} className="col-3">
                            <FormControl
                                id="type-of-claim"
                                error=""
                                required
                                className={"mt-m mb-m"}
                            >
                                <Label>Type of Claim</Label>
                                <Dropdown
                                    type="single"
                                    items={typeOfClaimList}
                                    value={selectedTypeOfClaim}
                                    onChange={setSelectedTypeOfClaim}
                                />
                            </FormControl>
                        </div>
                        <div ref={fileTypeIdRef} className="col-3">
                            <FormControl
                                id="file-type-id"
                                error=""
                                required
                                className={"mt-m mb-m"}
                            >
                                <Label>File Type ID:</Label>
                                <Dropdown
                                    type="single"
                                    items={fileTypeIdList}
                                    value={selectedFileTypeId}
                                    onChange={setSelectedFileTypeId}
                                />
                            </FormControl>
                        </div>
                        <div className="col-3 ${styles.sbmtBtn}">
                            <Button
                                onPress={onSubmit}
                                className={`mr-xs mt-s ${styles.sbmtBtn}`}
                            >
                                Search
                            </Button>
                        </div>
                    </div>
                </form>
            </Card>
            <br></br>
        </LoadingIndicator>
  }  
  export default Nemis3cOutboundConfig;

I want to pass state, typeOfClaim, fileTypeID from this first index.tsx to second index.tsx and store those values in variables.