Ciao, when I want to share data between components I use React-Redux. Lets make an example: Suppose that you want to share data received by server (nameservers). At first install react-redux:

npm install react-redux
npm install redux
npm install @reduxjs/toolkit

Now we have to create the reducer and the action: Lets say you have your component in a folder called "/components/MyComponent". Create a file called MyReducer.js.

/components/MyComponent/MyReducer.js

import { createReducer } from '@reduxjs/toolkit';

const initialState = {
  nameservers: undefined,
};

const LoginReducer = createReducer(initialState, {
   ["SET_NAMESERVERS"]: (state, action) => {
       state.nameservers= action.payload.nameservers;
   },
})

export default MyReducer;

Now, on the same folder, createa file called MyAction.js

/components/MyComponent/MyAction.js

export const setNameServers = data => ({
   type: "SET_NAMESERVERS",
   payload: { nameservers: data }
});

Then create the store: On your project root create a folder callled redux. Inside this create a folder called store. Then on this folder create a file called index.js.

redux/store/index.js

import { createStore, combineReducers } from "redux";
import MyReducer from '../../components/MyComponent/MyReducer';

const reducers = combineReducers({
  MyReducer,
});

const store = createStore(reducers);

export default store;

Now on index.js file on root folder lets pass the store already created:

index.js

...
import { Provider } from 'react-redux';
import store from "./redux/store";

ReactDOM.render((
 <Provider store={store}>
    <App />
 </Provider>
), document.getElementById('root') || document.createElement('div'));

We have almost done. On your component (MyComponent) you retrieve data from server. Once you have data, lets dispatch data to share into the store:

/components/MyComponent/MyComponent.js

...
import { useDispatch } from 'react-redux';
import { setNameServers } from './MyComponentAction';

const MyComponent: React.FC = () => {
   const [nameservers, setNameservers] = useState([]);
   const dispatch = useDispatch();
   ....
   const handleSubmit = (event: any) => {
     ...

fetch(`https://dns.google.com/resolve?name=${domain}&type=NS`)
.then(results => results.json())
.then(data => { 
  setLoading(false);
  if (data && data.Answer) {
    data.Answer.sort((a: any, b: any) => a.data.localeCompare(b.data));
    setNameservers(data.Answer);
    dispatch(setNameServers(data.Answer)); // here the magic
  } 
  });
 };
   
};

Done! now you have nameservers on your react redux store and you can easly get it from another component like this:

OtherComponent.js

import { useSelector } from 'react-redux';
const OtherComponent: React.FC = () => {
   const nameservers = useSelector(state => state.MyReducer.nameservers);
};

And if you log nameservers somewhere in OtherComponent you will see data retrieved in MyComponent. Awesome!

I think it's perfect time for you to introduce some state to your app. Try Redux, it's awesome.

I know two solutions to this.

The first and preferred one is to pass a exported function of one component as a property to the other component and thus linking them together, like:

import Dispay from './components/Dispay.js'
import Input from './views/Input.js'

<Input pushData={Dispay.pullData}/>
<Dispay/>

Here a working example of this:
https://codesandbox.io/s/pass-data-between-unrelated-components-rr2li?file=/src/App.js

The second method is an easy, although a bit dirty solution.
Use the browsers window object, as all React components can access this object.
In practice this might look like this:

Syncronous (event based):
components/MainComponent.js:

// call the other component's method with some data
window.processData("myDataString")

views/Element.js:

window.processData = function(data) {
    // do something with your data like
    console.log("MainComponent received data:",data);
}

Asyncronously

//read and write to this object from wherever you like
window.data