filename - Header.jsx
import { useEffect, useState } from 'react';
import { getValue } from './Input';
import TextField from '@mui/material/TextField';
export const Header = () => {
    const [search, setSearch] = useState('');
    useEffect(() => {
        getValue(search, continents);
    }, [search, continents]);
    return (
        <TextField id="outlined-basic" label="Outlined" variant="outlined" onChange={(e) => setSearch(e.target.value)} />
    );
}
filename - CountryData.jsx
let setVal = [];
export const getValue = (...val) => {
    setVal = val;
    return setVal;
};
export const CountryData = () => {
    const [searchVal, setSearchVal] = useState('');
    useEffect(() => {
        setSearchVal(setVal[0]);
    }, [setVal, getValue]);
    return null; // This component doesn't render anything, as you want to separate the rendering.
}