I got useState with a list of strings (currencies symbols like "USD", "EUR" etc.)

const [symbols, setSymbols] = useState<string[]>()

And I need to display it into the select field, right now I’m using this:

    const renderInputPanel = ()  => {
        return (
            <div className='input-panel'>
                <form>
                <select>
                    {symbols.map((symbol) => {
                        <option value={symbol}>symbol</option>
                    })}
                </select>
                </form>
            </div>
        )
    }

    return (<>
        {renderInputPanel()}
    </>)

It says the bug is in {symbols.map((symbol) =>..., but I have no idea what to do with it. Full Error:

TS2322: Type 'void[]' is not assignable to type 'ReactNode'.
  Type 'void[]' is not assignable to type 'ReactFragment'.
    The types returned by '[Symbol.iterator]().next(...)' are incompatible between these types.
      Type 'IteratorResult<void, any>' is not assignable to type 'IteratorResult<ReactNode, any>'.
        Type 'IteratorYieldResult<void>' is not assignable to type 'IteratorResult<ReactNode, any>'.
          Type 'IteratorYieldResult<void>' is not assignable to type 'IteratorYieldResult<ReactNode>'.
            Type 'void' is not assignable to type 'ReactNode'.
    24 |                 <form>
    25 |                 <select>
  > 26 |                     {symbols.map((symbol) => {
       |                     ^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 27 |                         <option value={symbol}>symbol</option>
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 28 |                     })}
       | ^^^^^^^^^^^^^^^^^^^^^^^^
    29 |                 </select>
    30 |                 </form>
    31 |             </div>


ERROR in src/converter/Converter.tsx:26:22

TS2532: Object is possibly 'undefined'.
    24 |                 <form>
    25 |                 <select>
  > 26 |                     {symbols.map((symbol) => {
       |                      ^^^^^^^
    27 |                         <option value={symbol}>symbol</option>
    28 |                     })}
    29 |                 </select>

>Solution :

1. add return before <option value={symbol}>symbol</option>

or

2. delete {} wrapped outside <option value={symbol}>symbol</option>