Quiero poner los accesorios del componente secundario en el valor de useState del componente principal, pero también viene con undefined. ¿Cómo no puedo quedar indefinido?

Componente hijo

 const FilterSelect = props => {
 const [filterUser, setFilterUser] = useState('all')

 const handleFilterUser = ({ target }) => {
 setFilterUser(target.value)
 }
 useEffect(() => {
 props.propFunction(filterUser)
 }, [filterUser])

 return (
 <Box sx={{ width: 120 }}>
 <FormControl fullWidth>
 <Select
 size="small"
 labelId="user-select-label"
 id="user-select"
 value={filterUser}
 label="filter"
 onChange={handleFilterUser}
 >
 </Select>
 </FormControl>
 </Box>
 )
}

componente principal

 import FilterSelect from './components/FilterSelect'

const UserList = () => {
 const [filterSelectOne, setFilterSelectOne] = useState('all')

 const highFunction = text => {
 setFilterSelectOne(text)
 }

 useEffect(() => {
 highFunction()
 }, [])

 console.log(filterSelectOne) // 'all', undefined

 return (
 <Box sx={{ width: '100%' }}>
 <Paper sx={{ width: '100%', mb: 2 }}>
 <FilterSelect propFunction={highFunction} />
 </Paper>
 </Box>
 )
}