nanoid is not a function

Title 만들기 진행중입니다.

하기 코드 작성 후 실행하면 콘솔에

nanoid is not a function라고 뜨는데, 특정 라이브버리 컴포넌트의 input.js에서 오류를 뱉고있습니다.

npm i nanoid도 해봤는데 안되어 해결방법 문의드립니다.

에러코드는 다음과 같습니다.

input.js:58 Uncaught TypeError: nanoid is not a function

at new Input (input.js:58:1)

at parse (parse.js:8:1)

at e.generateStyleObject (InlineStyle.ts:40:1)

at StyledNativeComponent.ts:78:1

at S (StyledNativeComponent.ts:108:1)

at renderWithHooks (react-dom.development.js:16305:1)

at updateForwardRef (react-dom.development.js:19226:1)

at beginWork (react-dom.development.js:21636:1)

at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)

at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)

import React from 'react';
import {StatusBar} from 'react-native';
import styled, {ThemeProvider} from 'styled-components/native'
import {theme} from "./theme";

const Container = styled.SafeAreaView`
  flex: 1;
  backgroundColor: ${({theme}) => theme.background};
  align-items: center;
  justify-content: flex-start;
`;

const Title = styled.Text`
font-size: 40px;
font-weight: 600;
color: ${({theme}) => theme.main};
width: 100%;
align-items: flex-end;
padding: 0 20px;
`;

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Container>
        <Title>TodoList</Title>
        <StatusBar barstyle="light-content"
                   backgroundColor={theme.background}
        />
      </Container>
    </ThemeProvider>
  );
}