I have created separate functional component which can be used more than once throughout a React project. Therefore, I tried to extract it as a new function component and pass the necessary props to it. I dont know why but the options on select dropdown are not showing... Thank you for any help.

// General Component //

```
   import React, { useState } from 'react';
   import Dropdown from '../Dropdown';

   function CategoryOfWork() {
     const [value, setValue] = useState('fruit');

     const options = [
       { label: 'Fruit', value: 'fruit' },
       { label: 'Vegetable', value: 'vegetable' },
       { label: 'Meat', value: 'meat' },
     ];

     const handleChange = (event: any) => {
       setValue(event.target.value);
     };

     return <Dropdown options={options} value={value} onChange={handleChange} />;
   }

   export default Dropdown;

```

// Component where I want to see options//

```
   const Dropdown = ({ value, options, onChange }: ICategoryOfWork) => {
     <select
       value={value}
       onChange={onChange}
     >
       {options?.map((option) => (
          <option value={option.value}>{option.label}</option>
       ))}
     </select>
   }

```

// typescript//

```
   interface ICategoryOfWork {
     value: string;
     options: {
      label: string;
       value: string;
     }[];
     onChange: (event: any) => void;
   }

   export default ICategoryOfWork;

```