Add an ESLint rule to prevent the usage of useRef other than for HTML elements. (#2014)

* Add an ESLint rule to prevent the usage of useRef other than for HTML elements

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Bump eslint version and rewrite rule

* Fix

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/data/field/meta-types/input/components/internal/DateInput.tsx

@@ -50,7 +50,7 @@ export const DateInput = ({
 
   const [internalValue, setInternalValue] = useState(value);
 
-  const wrapperRef = useRef(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
   const { refs, floatingStyles } = useFloating({
     placement: 'bottom-start',

front/src/modules/ui/data/field/meta-types/input/components/internal/PhoneInput.tsx

@@ -64,7 +64,7 @@ export const PhoneInput = ({
 }: PhoneInputProps) => {
   const [internalValue, setInternalValue] = useState<string | undefined>(value);
 
-  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     setInternalValue(value);

front/src/modules/ui/data/field/meta-types/input/components/internal/TextInput.tsx

@@ -36,7 +36,7 @@ export const TextInput = ({
 }: TextInputProps) => {
   const [internalText, setInternalText] = useState(value);
 
-  const wrapperRef = useRef(null);
+  const wrapperRef = useRef<HTMLInputElement>(null);
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setInternalText(event.target.value);