react-autosuggest with useRef - reactjs

Question

I am trying to create an input with the autosuggest. As I am using tailwind, there is no this kind of input there and therefore I came across react-autosuggest. The thing is however, I need to use a ref for this Autosuggest Input, cause I need to submit after a select and logically get the value of this Autosuggest Input on button click/submit. Here is part of my code (not everything). The code was working with normal input, so ne help needed apart from fixing the Ref problem:
import { useState, useEffect, useRef } from 'react';
import Autosuggest from 'react-autosuggest';
export const SearchBar = () => {
const autosuggestInput = useRef(null);
....
const city = autosuggestInput.current.value;
......
return(
<Autosuggest
type="text"
ref={autosuggestInput}
className="py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"
/>
)
}
Here I am getting the Error: Cannot read property 'value' of undefined. Which suggests that the ref is not working. I am using next.js and therefore also functional components. Maybe that is the problem?

Answer 1

By default your ref line won't do anything. Because ref only applies to the Host component, such as div, p, button etc.
<div ref={ref}>ABC</div>
The above line will work. Ok, so in order to get the ref onto a custom component, there's some ways. One is to use a forwardRef, however either way the interface of react-autosuggest needs to allow you do that. I just read a bit, doesn't seem so.
However if you just want the value, seems the documentation is asking you do this
const inputProps = {
placeholder: 'Type a programming language',
value,
onChange: this.onChange
};
return (
<Autosuggest
...
inputProps={inputProps}
/>
);
Try their demo first. Basically any input is driven by value and onChange. The rest of them are all sugar code.

Answer 2

React auto-suggest is a controlled component and so needs some mandatory parameters passed into it such as the value, suggestions, onChange handler etc. which is what is giving you the error and NOT useRef.
See Basic Usage here : https://www.npmjs.com/package/react-autosuggest
The following props need to be passed through to the AutoSuggest component (From the Basic Usage npm docs) :
// Finally, render it!
return (
<Autosuggest
suggestions={suggestions}
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
onSuggestionsClearRequested={this.onSuggestionsClearRequested}
getSuggestionValue={getSuggestionValue}
renderSuggestion={renderSuggestion}
inputProps={inputProps}
/>
);