Property 'lens' does not exist on type 'ReadOnlyAtom<State>'

[sbahir]

I found this codesandbox that was shared by a Grammarly in an engineering post

In line 89 and 90, there is a Typescript compilation error

  const alerts = props.state.lens("alerts");
  const highlights = props.state.lens("highlights");

Property 'lens' does not exist on type 'ReadOnlyAtom<State>'

The code still works but I was intrigued by that knowing that method lens doesn't seem to appear in ReadOnlyAtom as reference here

Can someone explain what I could be missing here?

Should the object be Atom instead of ReadOnlyAtom?

[Nick-bond]

Should the object be Atom instead of ReadOnlyAtom?

definitely, lens is defined in Atom which extends ReadOnlyAtom so the correct to use

const App = (props: { state: Atom<State> }) => {
  const alerts = props.state.lens("alerts");
  const highlights = props.state.lens("highlights");