Templee_0201_ Inteface overriding

Problem : two interfaces which have different property collide !

1 ) I made the styled component of 'Select' element, so that I can use it commonly in my project

Select/index.tsx

import * as React from 'react';
import styled from 'styled-components';
import useSelectInput, { SelectState } from 'lib/hooks/useSelectInput';

interface SelectItem {
  id: number;
  [value: string]: string | number;
}
interface SelectProps {
  items: SelectItem[];
}

const Select: React.FC<SelectProps> = ({ items }) => {
  const [seletedValue, onChangeSelectedValue] = useSelectInput({
    value: '',
  });
  return (
    <SelectForm>
      <SelectBlock value={seletedValue.value} onChange={onChangeSelectedValue}>
        {items.map((item) => (
          <OptionBlock key={item.id} value={item.value}>
            {item.value}
          </OptionBlock>
        ))}
      </SelectBlock>
    </SelectForm>
  );
};

export default Select;

const SelectForm = styled.form``;
const SelectBlock = styled.select``;
const OptionBlock = styled.option``;

And I wanted to use it in 'todolist' select button

Todo.tsx

type TodoIdNameList = { 
    teamId: number;
    [teamName: string]: string | number;
}

const TodoCreateView : React.FC<RouteComponentProps> = ({ history } ) => {


	const [todoUniqNameIds, setUniqTodoNameIds] = useState<TodoIdNameList[]>(initTodoNameIds)

        return ( 
                <form>
                    <Select items = {todoUniqNameIds}
                        
                    >
                        {/* { todoUniqNameIds[0] && todoUniqNameIds.map( todo => (
                            // 아래 value = {Continent} : State을 넣어준다
                            <option key={todo.teamId} value ={todo.teamId} >
                                {todo.teamName}
                            </option>
                        ))} */}
                    </Select>
                    <Input type = "text" placeholder = "할일" value = {newTodo} onChange = {handleNewTodoChange}/>
                    <Button type = "submit" value = "Add Todo" onClick = {handleSubmit} >Add Todo</Button>
                </form>
            // <>
             // {/* <AddToDoForm addTodo = {addTodo} /> */}
            // </>
          );

2 ) I got an error in below code

<Select items = {todoUniqNameIds}

Property 'id' is missing in type '{ teamId: number; teamName: string; }' but required in type 'TodoIdNameList'.  TS2741
                        
                    >

so it's saying that,

value , that is set as 'items' props
should have
1. id
2. value

property

but , { todoUniqNameIds}, which is typed as " TodoIdNameList[] "

does not have
'id', ' value ' as a property .

How Can I solve it ?

items = {
            (todoUniqNameIds as unknown) as 
              [{
                id : TodoIdNameList["teamId"]
                value : TodoIdNameList["teamName"]
              }]
        }